Como centralizar botões no Twitter Bootstrap 3?


259

Estou criando um formulário no Twitter Bootstrap, mas estou tendo problemas para centralizar o botão abaixo da entrada no formulário. Eu já tentei aplicar a center-blockclasse ao botão, mas isso não funcionou. Como devo corrigir isso?

Aqui está o meu código.

<!-- Button -->
<div class="form-group">
    <label class="col-md-4 control-label" for="singlebutton"></label>
    <div class="col-md-4">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
            Next Step!
        </button>
    </div>
</div>

Respostas:


570

Coloque o botão em div com a classe "text-center".

Apenas mude isso:

<!-- wrong -->
<div class="col-md-4 center-block">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>

Para isso:

<!-- correct -->
<div class="col-md-4 text-center"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> 
</div>

Editar

A partir do BootstrapV4 , center-blockcaiu o número 19102 em favor dem-*-auto


1
Funciona mesmo com o Foundation)
divideByZero 30/03

35

De acordo com a documentação do Twitter Bootstrap: http://getbootstrap.com/css/#helper-classes-center

<!-- Button -->
<div class="form-group">
   <label class="col-md-4 control-label" for="singlebutton"></label>
   <div class="col-md-4 center-block">
      <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
          Next Step!
       </button>
   </div>  
</div>

Tudo o que a classe center-blockfaz é dizer ao elemento que tenha uma margem de 0 automático, sendo as margens esquerda / direita automática. No entanto, a menos que a classe text-center ou css text-align: center; é definido no pai, o elemento não sabe o ponto para calcular esse cálculo automático, portanto não se centra como previsto.

Veja um exemplo do código acima aqui: https://jsfiddle.net/Seany84/2j9pxt1z/


33
<div class="row">
  <div class="col-sm-12">
    <div class="text-center">
      <button class="btn btn-primary" id="singlebutton"> Next Step!</button>
    </div>
  </div>
</div>

Este é o que funcionou para mim. Eu tentei os outros acima e não iria centrar.
mjwrazor

Como fazer o mesmo com um inputelemento?
InfZero

8

adicione ao seu estilo:

display: mesa; margem: 0 automático;


5
Não tenho certeza de como você chegou a essa conclusão.
Fergus

8
<div class="container-fluid">
   <div class="col-sm-12 text-center">
       <button class="btn btn-primary" title="Submit"></button>
       <button class="btn btn-warning" title="Cancel"></button>
   </div>
</div>

2
Embora esse código possa responder à pergunta, fornecer um contexto adicional a respeito de por que e / ou como esse código responde à pergunta melhora seu valor a longo prazo.
Ajean

5

Você pode fazer isso dando margem ou posicionando esses elementos absolutamente.

Por exemplo

.button{
  margin:0px auto; //it will center them 
}

0px será da parte superior e inferior e o automático será da esquerda e direita.


5

Eu tentei o código a seguir e funcionou para mim.

<button class="btn btn-default center-block" type="submit">Button</button>

O controle de botão está em uma div e o uso da classe de bloco de inicialização do bloco de inicialização me ajudou a alinhar o botão ao centro da div

Verifique o link onde você encontrará a classe do bloco central

http://getbootstrap.com/css/#helper-classes-center



3

Atualização para o Bootstrap 4:

Enrole o botão com um conjunto de divs com as classes de utilitário 'd-flex' e 'justify-content-center' para aproveitar o flexbox.

<!-- Button -->
<div class="form-group">
  <div class="d-flex justify-content-center">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">
      Next Step!
    </button>
  </div>
</div>

A vantagem de usar o flexbox é poder adicionar elementos / botões adicionais no mesmo eixo, mas com seu próprio alinhamento separado. Também abre a possibilidade de alinhamento vertical com as classes 'align-items-start / center / end'.

Você pode envolver o rótulo e o botão com outra div para mantê-los alinhados um com o outro.

por exemplo, https://codepen.io/anon/pen/BJoeRY?editors=1000


1

Você pode fazer o seguinte. Também evita a sobreposição de botões.

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>

1

Funciona para mim tentar fazer um independente e <div>depois colocar buttonnisso. bem assim :

<div id="contactBtn">
            <button type="submit" class="btn btn-primary ">Send</button>
</div>

Então vá para a sua CSSpágina Style e faça o Text-align:centerseguinte:

#contactBtn{text-align: center;}

0

Para o Bootstrap 3

dividimos o espaço com as colunas, usamos 8 pequenas colunas (col-xs-8), deixamos 4 colunas vazias (col-xs-offset-4) e aplicamos a propriedade (bloco central)

<!--Footer-->
<div class="modal-footer">
  <div class="col-xs-8 col-xs-offset-4 center-block">
    <button type="submit" class="btn btn-primary">Enviar</button>
    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
    </div>
</div>

Para o Bootstrap 4

Usamos o espaçamento, o Bootstrap inclui uma ampla variedade de classes de utilitário de margem de resposta abreviada e acolchoada para modificar a aparência de um elemento. As classes são nomeadas usando o formato {propriedade} {lados} - {tamanho} para xs e {propriedade} {lados} - {ponto de interrupção} - {tamanho} para sm, md, lg e xl.

mais informações aqui: https://getbootstrap.com/docs/4.1/utilities/spacing/

<!--Footer-->
<div class="modal-footer">
  <button type="submit" class="btn btn-primary ml-auto">Enviar</button>
  <button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>

Embora esse trecho de código possa resolver a questão, incluir uma explicação ajuda a melhorar a qualidade de sua resposta. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código.
Stefan Crain

0

Eu tive esse problema. eu usei

<div class = "col-xs-8 text-center">

No meu div, contendo algumas linhas h3, algumas linhas h4 e um botão Bootstrap. Tudo, além do botão, saltou para o centro depois que eu usei o centro de texto, então entrei na minha folha de CSS substituindo o Bootstrap e dei um botão ao

margin: auto;

o que parece ter resolvido o problema.


-2

ou você pode fornecer deslocamentos específicos para posicionar o botão onde desejar, simplesmente com o sistema de grade de autoinicialização,

<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>

Dessa forma, também é possível especificar o tamanho do botão se você definir o bloco btn. Certamente, isso funcionará apenas na faixa de tamanho md; se você quiser definir outros tamanhos também, use xs, sm, lg.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.