text-align, justify-content not working in Safari

Question

In Chrome everything works good, but is aligned to the right in Safari, I don't know why. It's a button with text. I tried text-align center; , justify-content: center; or text-align: -webkit-center; but nothing happened.

 .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

For justify-content:center to work it has to be in a display:flex or display:grid block.
You can change your display: block to display:flex .

It also seems to me that your css classes do not correspond to those in your html.