文本对齐，对齐内容在 Safari 中不起作用

Question

在 Chrome 中一切正常，但在 Safari 中向右对齐，我不知道为什么。 这是一个带有文本的按钮。 我试过text-align center; ， justify-content: center; 或text-align: -webkit-center; 但什么也没发生。

 .box-product.add-items.bttn-add { width: 115px; height: 30px; display: block; background-color: var(--naranjoAgro); color: #fff; text-transform: uppercase; font-size: 1em; font-weight: 700; line-height: 30px; border-radius: 15px; margin: 0 0 0 1em; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; justify-content:center; }

 <div class="buttonbox"> <c:choose> <c:when test="${(autentificar == 'true')&&(statusUsuario == 2)}"> <a class="bttn-add btncarr spinner-button" onclick="mensajeBloqueoCompras();" type="submit">agregar</a> </c:when> <c:when test="${autentificar == 'true'}"> <a class="bttn-add btncarr spinner-button" onclick="agregarProducto(this, '${oferta.codigo_material}', 'cantidadProdu${oferta.codigo_material}', '${contexto}', '${cantidadMinPed}', '${cantidadMaxUni}', 'HOME - PRODUCTOS EN OFERTA')" data-button-action="add-to-cart" type="submit">agregar</a> </c:when> </c:choose> </div>

Answer 1

为了让justify-content:center工作，它必须在display:flex或display:grid块中。
您可以将display: block更改为display:flex 。

在我看来，您的 css 类与您的 html 中的类不对应。