Existem duas abordagens para centralizar uma coluna <div>
no Bootstrap 3:
Abordagem 1 (compensações):
A primeira abordagem usa as próprias classes de deslocamento do Bootstrap, portanto, não requer alterações na marcação e nenhum CSS extra. A chave é definir um deslocamento igual à metade do tamanho restante da linha . Por exemplo, uma coluna de tamanho 2 seria centralizada adicionando um deslocamento de 5, é isso (12-2)/2
.
Na marcação, seria assim:
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
Agora, há uma desvantagem óbvia para esse método. Ele só funciona para os tamanhos das colunas mesmo , tão somente .col-X-2
, .col-X-4
, col-X-6
, col-X-8
, e col-X-10
são suportados.
Se aproxime 2 (o velho margin:auto
)
Você pode centralizar qualquer tamanho de coluna usando a margin: 0 auto;
técnica comprovada . Você só precisa cuidar da flutuação adicionada pelo sistema de grade do Bootstrap. Eu recomendo definir uma classe CSS personalizada como a seguinte:
.col-centered{
float: none;
margin: 0 auto;
}
Agora você pode adicioná-lo a qualquer tamanho de coluna em qualquer tamanho de tela e funcionará perfeitamente com o layout responsivo do Bootstrap:
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Nota: Com ambas as técnicas, você pode pular o .row
elemento e ter a coluna centralizada em a .container
, mas você observaria uma diferença mínima no tamanho real da coluna devido ao preenchimento na classe de contêiner.
Atualizar:
Como o v3.0.1 Bootstrap possui uma classe interna chamada center-block
que usa margin: 0 auto
, mas está ausente float:none
, você pode adicioná-lo ao seu CSS para fazê-lo funcionar com o sistema de grade.