3

Galera tenho dois button que estão alinhados no centro usando display: block;. O problema e que um fica encima do outro, para ficar um do lado do outro eu usei display: tale-cell; e o problema e que eles não ficam no centro.

Como faço para colocar um do lado do outro e alinhados no centro da pagina?

button {
    display: table-cell;
    border:0;
    padding:10px;
    width:200px;
    height: 50px; 
    margin: 20px auto;
    cursor: pointer;
    border-radius: 3px;
}
<button  type='submit'>bt1</button>

<button  type='submit'>bt2</button>

2 Respostas 2

4

Eu resolveria assim:

<div class="linha">
    <div class="botoes">
        <button /> <button />
    </div>
</div>

CSS:

.linha { width:100%; }
.botoes { margin: 0 auto 0 auto; text-align: center;     }
2
  • funcionou 100%, mas teria alguma forma de resolver sem ter que criar 2 div? Commented 5/05/2016 às 14:25
  • 2
    Com uma única div, você pode atribuir a ela as duas classes (não recomendo), ou você pode mesclar as duas classes CSS em uma única classe. Commented 5/05/2016 às 14:30
3

Outra Forma

HTML

<div class="btns">
  <button  type='submit'>bt1</button>
  <button  type='submit'>bt2</button>
</div>

CSS

.btns{
  text-align: center;
}
button {
    display: inline-block;
    border:0;
    padding:10px;
    width:200px;
    height: 50px; 
    margin: 20px 5px;
    cursor: pointer;
    border-radius: 3px;
}
2
  • 1
    muito bom, ficou muito simples sua solução Commented 5/05/2016 às 14:37
  • E se precisar, dependendo do que tiver dentro do button, vertical-align:middle nele.
    – Largato
    Commented 6/05/2016 às 23:35

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 .