Incorrect centering of button

Asked

Viewed 67 times

3

I have a button within a div which I cannot center on. By means of margin-left I can do this, but to treat the same in the responsiveness is very massante.

Code of button together with the div:

<div class="actions responsivo">
  <button type="button" title="Adicionar ao carrinho" class="button btn-cart responsivo amarelo" onclick="addCartao('<?php echo $_product->getId(); ?>')" name="cartaoMensagem<?php echo $_product->getId(); ?>" id="cartaoMensagem<?php echo $_product->getId(); ?>"><span><span>Adicionar</span></span></button>
</div>

CSS used:

.actions.responsivo {
    text-align: center;
}
.button.btn-cart.responsivo.amarelo {
    color: #ffffff;
    font-size: 12px;
    text-transform: uppercase;
    background: #e7af19;
    border-radius: 3px;
    padding: 7px 50px;
    border: none;
    cursor: pointer;
    display: block;
    margin-top: 19px;
    text-align: center;
    line-height: normal;
    margin-left: 12px !important;
    font-family: 'CoHeadlineCorp-Light';
    font-weight: bold;
}
html css html5 css3

2 answers

2


You can use the transform below to center horizontally any element:

.centralizado{
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0);
  transform: translate(-50%,0);
  left: 50%;
  position: relative;
}

  • Thank you helped me too!

  • It worked! Plus I’ll use it for other elements too, so helping me a lot in all ways. Thanks a lot for the help!

1

A very modern and simple way of doing this centralization is by using display:flex and applying justify-content:center. It even makes it easier if you have to center more buttons for example, or center vertically also with the property align-items.

Example:

.actions.responsivo {
  text-align: center;
  display:flex; /*<----------------- */
  justify-content:center; /*<------- */
}

.button.btn-cart.responsivo.amarelo {
  color: #ffffff;
  font-size: 12px;
  text-transform: uppercase;
  background: #e7af19;
  border-radius: 3px;
  padding: 7px 50px;
  border: none;
  cursor: pointer;
  display: block;
  margin-top: 19px;
  text-align: center;
  line-height: normal;
  margin-left: 12px !important;
  font-family: 'CoHeadlineCorp-Light';
  font-weight: bold;
}
<div class="actions responsivo">
  <button type="button" title="Adicionar ao carrinho" class="button btn-cart responsivo amarelo" onclick="addCartao('<?php echo $_product->getId(); ?>')" name="cartaoMensagem<?php echo $_product->getId(); ?>" id="cartaoMensagem<?php echo $_product->getId(); ?>"><span><span>Adicionar</span></span></button>
</div>

Documentation:

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.