Como centralizar um mergulho de um tamanho de coluna dentro do contêiner (12 colunas) em Twitter Bootstrap 3?
.centered {
background-color: red;
}
<body class="container">
<div class="col-lg-1 col-offset-6 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
Eu quero um "div", com uma classe "centrada" a ser centrada dentro do contentor. Eu posso utilizar uma linha se houver múltiplos div
s, mas por enquanto eu só quero um div
com o tamanho de uma coluna centrada dentro do container (12 colunas).
Também não tenho certeza se a abordagem acima é boa o suficiente, pois a intenção não é compensar o div
pela metade. Eu não preciso de espaços livres fora do div
e o conteúdo do div
encolhe na proporção. Eu quero espaço vazio fora do mergulho para ser distribuído uniformemente (encolher até a largura do recipiente ser igual a uma coluna).
Há duas abordagens para centrar uma coluna <div>
em Bootstrap 3:
A primeira abordagem utiliza as próprias classes de compensação da Bootstrap, pelo que não requer nenhuma alteração na marcação e nenhum CSS extra. A chave é fixar um offset igual a metade do tamanho restante da linha. Assim, por exemplo, uma coluna de tamanho 2 seria centrada pela adição de um offset de 5, ou seja, (12-2)/2
.
Em markup isto pareceria:
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
Agora, há uma desvantagem óbvia para este método. **Ele só funciona para tamanhos de colunas iguais***, então apenas .col-X-2
, .col-X-4
, col-X-6
, col-X-8
, e col-X-10
são suportados.
margin:auto
)Você pode centrar qualquer tamanho de coluna utilizando a comprovada margin: 0 auto;
técnica. Você só precisa cuidar do flutuante que é adicionado pelo sistema de grid do Bootstrap. Eu recomendo a definição de 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 ele funcionará perfeitamente com o layout responsivo do Bootstrap:
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Actualização:
Como a v3.0.1 Bootstrap tem uma classe interna chamada center-block
que utiliza margin: 0 auto
, mas falta float:none
, você pode adicionar isso ao seu CSS para que ele funcione com o sistema de grid.
Bootstrap 3 agora tem uma classe incorporada para este `.center-block''.
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Se você ainda estiver usando 2.X, basta adicionar isto ao seu CSS.
Isto funciona. Uma maneira hackish provavelmente, mas funciona muito bem. Foi testado para reagir (Y).
.centered {
background-color: teal;
text-align: center;
}