3

Eu tenho um button dentro de uma div da qual eu não consigo centralizar ele. Por meio de margin-left eu consigo fazer isso, porém para tratar o mesmo na responsividade é bem massante.

Código do button juntamente com a 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 utilizado:

.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;
}

2 Respostas 2

2

Você pode utilizar o transform abaixo para centralizar horizontalmente qualquer elemento:

.centralizado{
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0);
  transform: translate(-50%,0);
  left: 50%;
  position: relative;
}
2
  • Obrigado me ajudou também! Commented 4/11/2017 às 13:11
  • Deu certo! Além de que irei usar isso para outros elementos também, assim me ajudando muito de todas as formas. Muito obrigado pela ajuda! Commented 4/11/2017 às 13:15
1

Uma forma bem moderna e simples de fazer essa centralização é utilizando display:flex e aplicando justify-content:center. Acaba até por facilitar se tiver que centralizar mais botões por exemplo, ou centralizar na vertical também com a propriedade align-items.

Exemplo:

.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>

Documentação:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .