文本对齐，对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中的css类不对应。