Incorrect button centering

Question

Incorrect button centering

Navigation

#1 by (2 votes)
#2 by (1 votes)

3

I have button within a div of which I can not centralize it. Through margin-left I can do this, but to treat the same in responsiveness is very annoying.

Code of button together with 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 html5 css css3

asked by anonymous 04.11.2017 / 13:59

2 answers

1

A very modern and simple way to do this centralization is by using display:flex and applying justify-content:center . It even makes it easier if you have to centralize more buttons for example, or center in vertical 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:

04.11.2017 / 14:49

Change data without refresh with jquery Number of numbers greater than 7 in a list in Python

score 2 · Accepted Answer

You can use transform below to horizontally center any element:

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