text-align, justify-content not working in Safari

Emerson 0
Viewed 32

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>

jsp java css html
1 Answers

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.

draxe0
Related