Centralize uma coluna usando o Twitter Bootstrap 3

1146

Como centralizo uma div de um tamanho de coluna no contêiner (12 colunas) no 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>
Expandir snippet

Eu quero um div, com uma classe .centeredcentrada no contêiner. Posso usar uma linha se houver vários divs, mas por enquanto só quero um divcom o tamanho de uma coluna centralizada no contêiner (12 colunas).

Também não tenho certeza de que a abordagem acima seja boa o suficiente, pois a intenção não é compensar a divmetade. Não preciso de espaços livres fora divdo conteúdo e do divpsiquiatra na proporção. Quero que o espaço vazio fora da div seja distribuído uniformemente (encolha até que a largura do contêiner seja igual a uma coluna).

css twitter-bootstrap twitter-bootstrap-3 centering bsr
fonte

Respostas:

1963

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-10sã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 .rowelemento 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-blockque 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.

koala_dev
fonte
1
Eu acho que não há float: nenhum na regra do bloco central porque existe uma regra independente do clearfix que você pode adicionar aos elementos para limpar os carros alegóricos.
Diego Fernando Murillo Valenci
7
@DiegoFernandoMurilloValenci .clearfixnão iria funcionar neste caso, porque ele não remover a propriedade flutuação sobre os elementos (que é necessário para o centro usando margin: 0 auto), ele só faz um recipiente envolver quaisquer elementos flutuavam dentro
koala_dev
4
não pode usar isso em uma coluna, porque nenhumfloat:none;
airtonix
2
Se você deseja centralizar mais de uma coluna em uma única linha, consulte esta resposta stackoverflow.com/questions/28683329/…
Conor Svensson
3
A sintaxe do deslocamento mudou no Bootstrap4 (a partir da versão mais recente). Usando esta resposta como exemplo: a classe col-md-offset-5 agora deve ser offset-md-5.
lgants
296

O método preferido de centragem colunas é a utilização de "offsets" (ou seja: col-md-offset-3)

Exemplos de centralização do Bootstrap 3.x

Para elementos de centralização , há uma center-block classe auxiliar .

Você também pode usar text-centerpara centralizar o texto (e elementos embutidos).

Demo : http://bootply.com/91632

EDIT - Conforme mencionado nos comentários,center-blockfunciona no conteúdo e nosdisplay:blockelementos dacoluna, mas não funciona na própria coluna (col-*divs) porque o Bootstrap usafloat.

Atualização 2018

Agora, com o Bootstrap 4 , os métodos de centralização foram alterados.

  • text-centerainda é usado para display:inlineelementos
  • mx-autosubstitui center-blockpara centralizar display:blockelementos
  • offset-* ou mx-auto pode ser usado para centralizar colunas da grade

mx-auto(margens de auto eixo x) vai centrar display:blockou display:flexos elementos que têm uma largura definida , ( %, vw, px, etc ..). O Flexbox é usado por padrão nas colunas da grade, portanto, também existem vários métodos de centralização do flexbox.

Demonstração Bootstrap 4 Centralização Horizontal

Para centralização vertical no BS4, consulte https://stackoverflow.com/a/41464397/171456

Zim
fonte
31
Infelizmente, essa classe auxiliar não funciona com o sistema de colunas, pois não trata da propriedade float. Veja esta demonstração, por exemplo.
Koala_dev 5/12
13
Isso requer apenas um bloco central {float: none; } e funciona. bootply.com/122268
Matias Vad
5
não tenho certeza do OP, mas cheguei aqui procurando os text-centerdetalhes - que nenhuma das outras respostas forneceu. Este recebe meu voto.
domoarigato 02/02
1
não pode usar isso em uma coluna, porque nenhumfloat:none;
airtonix
98

Agora o Bootstrap 3.1.1 está trabalhando .center-blocke essa classe auxiliar funciona com o sistema de colunas.

Bootstrap 3 Helper Class Center .

Por favor, verifique esta DEMO jsfiddle :

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

Centro de aulas auxiliares

Linha centro da coluna usando a col-center-blockclasse auxiliar.

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}
Remetente
fonte
Eu consegui esse trabalho sem adicionar float:none, certificando-me de que o bloco central div tenha o style="width : ?px"estilo aplicado a ele. Por exemplo, uma largura de imagem. Funciona com 3.2.2
Piotr Kula
margem: 0 automático; - suficiente em vez de margem esquerda + margem direita
mmike 29/08
57

Basta adicionar o seguinte ao seu arquivo CSS personalizado. A edição direta de arquivos CSS do Bootstrap não é recomendada e cancela a capacidade de usar uma CDN .

.center-block {
    float: none !important
}

Por quê?

O CSS do Bootstrap (versão 3.7 e inferior) usa a margem: 0 auto; , mas é substituído pela propriedade float do contêiner de tamanho.

PS :

Depois de adicionar esta classe, não se esqueça de definir as classes na ordem certa.

<div class="col-md-6 center-block">Example</div>
Sagive SEO
fonte
1
Estou usando o Bootstrap 3.3.7e este é o único método que funciona para mim!
illagrenan
1
isso funciona. mas não acho que !importanté necessário
Gianfranco P.
1
@GianfrancoP. P. Você está certo, mas ... isso depende da ordem de carregamento e eu queria fornecer um método infalível.
Sagive SEO
39

O Bootstrap 3 agora tem uma classe interna para esse.center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Se você ainda estiver usando o 2.X, basta adicionar isso ao seu CSS.

Schmalzy
fonte
isso provavelmente daria o efeito desejado da maneira mais fácil. Também jogar largura na classe .centered ou adicionar uma segunda classe se você estiver indo para uma abordagem mais modular
Matt Lambert
2
Adicionando float: nenhum; para .centrado permite mover a classe para o contêiner. mantém o código mais limpo
Adam Patterson
7
não pode usar isso em uma coluna, porque nenhumfloat:none;
airtonix
37

Minha abordagem para as colunas centrais é usar display: inline-blockpara colunas e text-align: centerpara o pai do contêiner.

Você apenas precisa adicionar a classe CSS 'centralizada' ao arquivo row.

HTML:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

CSS:

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSFiddle: http://jsfiddle.net/steyffi/ug4fzcjd/

Steffi
fonte
2
Esta é a única resposta que funcionou 100% do tempo - Os outros funcionaram, mas não quando o bootstrap mudou para a visualização móvel (os itens foram movidos para o lado esquerdo).
Levi Fuller
Esse foi o único que também funcionou comigo. O bloco de centro funciona apenas para uma coluna e eu preciso centralizar todas as colunas independentemente de quantas são.
cjohansson
Única solução que funcionou para mim também. Outros funcionavam apenas quando o navegador era uma janela (não em tela cheia).
kiwicomb123
26

O Bootstrap versão 3 possui uma classe .text-center.

Basta adicionar esta classe:

text-center

Simplesmente carregará este estilo:

.text-center {
    text-align: center;
}

Exemplo:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>
RustyIngles
fonte
Esclarecer onde esta classe será adicionada?
aksu 20/09/16
Olá @aksu, você não precisa adicionar nenhum .css. Veja o exemplo fornecido.
JoshYates1980
15

Isso funciona. Uma maneira hackish provavelmente, mas funciona bem. Foi testado para resposta (Y).

.centered {
    background-color: teal;
    text-align: center;
}

Área de Trabalho

Responsivo

Ali Gajani
fonte
funciona apenas porque o elemento tem diplay embutido. Um imgpode ser definido como um bloco.
precisa saber é o seguinte
Talvez no seu caso de teste isolado. Eu acrescentaria .centered img { display: inline; }sua resposta e, então, seria digno de um voto positivo.
precisa saber é o seguinte
Sem problemas. Estou certo de que o OP vai encontrar seu / sua resposta :)
Ali Gajani
no bootstrap 3, a classe .text-center faz a mesma coisa nativamente, como aprendi acima.
domoarigato 2/02
7 
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>
wali
fonte
6

Para centralizar a coluna, precisamos usar o código abaixo. colunas são elementos flutuantes além da margem automática. Também vamos configurá-lo para flutuar nenhum,

<body class="container">
    <div class="col-lg-1 col-md-4 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Para centralizar o col-lg-1 acima com a classe centrado, escreveremos:

.centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Para centralizar o conteúdo dentro da div, use text-align:center,

.centered {
    text-align: center;
}

Se você deseja centralizá-lo apenas na área de trabalho e na tela maior, não no celular, use a seguinte consulta de mídia.

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

E para centralizar o div apenas na versão móvel, use o código abaixo.

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}
Aamer Shahzad
fonte
6

Basta definir sua coluna que exibe o conteúdo como col-xs-12 (mobile-first ;-) e configurar o contêiner apenas para controlar a largura que você deseja que seu conteúdo centralizado tenha, portanto:

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}
<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
Expandir snippet

<body class="container col-xs-offset-1 col-xs-10">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
Expandir snippet

Para uma demonstração, consulte http://codepen.io/Kebten/pen/gpRNMe :-)

Kieran Ryan
fonte
6

Outra abordagem da compensação é ter duas linhas vazias, por exemplo:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
LeRoy
fonte
1
2 divs inúteis, col-md-offset- * é melhor
ymakux 19/09/15
1
Concordo. Eu usei esse método porque ele realmente funciona bem e foi testado.
LeRoy
6

Você pode usar text-centera linha e garantir que as divs internas tenham display:inline-block(com não float).

Como:

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

E CSS:

.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}

O violino: http://jsfiddle.net/DTcHh/3177/

Alireza Fattahi
fonte
6

Com o bootstrap 4, você pode simplesmente tentar, justify-content-md-centercomo mencionado aqui

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

insira a descrição da imagem aqui

Hossein Narimani Rad
fonte
1
@AdamErickson A pergunta foi feita especificamente para uma solução de bootstrap 3. Como esta resposta é provavelmente o caminho a percorrer no BS4, em 2019 algum software ainda está usando inicialização 3.
A1rPun
5

Essa provavelmente não é a melhor resposta, mas há mais uma solução criativa para isso. Conforme apontado por koala_dev, o deslocamento da coluna funciona apenas para tamanhos uniformes de colunas. No entanto, ao aninhar linhas, você também pode centralizar colunas desiguais.

Para manter a pergunta original, na qual você deseja centralizar uma coluna 1 dentro de uma grade 12.

  1. Centralize uma coluna de 2 deslocando-a 5
  2. Faça uma linha aninhada, para obter 12 novas colunas em suas 2 colunas.
  3. Como você deseja centralizar uma coluna de 1 e 1 é "metade" de 2 (o que centralizamos na etapa 1), agora você precisa centralizar uma coluna de 6 na linha aninhada, o que é feito facilmente deslocando-a 3.

Por exemplo:

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

Veja este violino , observe que você precisa aumentar o tamanho da janela de saída para também ver o resultado, caso contrário as colunas serão quebradas.

reinder
fonte
5

Este não é o meu código, mas funciona perfeitamente (testado no Bootstrap 3) e não preciso mexer com o offset de col.

Demo:

/* centered columns styles */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  background-color: #ccc;
  border: 1px solid #ddd;
}
<div class="container">
  <div class="row text-center">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>
Expandir snippet

Binar Web
fonte
4

Podemos conseguir isso usando o mecanismo de layout da tabela:

O mecanismo é:

  1. Quebra todas as colunas em uma div.
  2. Faça essa div como uma tabela com um layout fixo.
  3. Faça cada coluna como uma célula da tabela.
  4. Use a propriedade vertical-align para controlar a posição do conteúdo.

A demonstração de amostra está aqui

Digite a descrição da imagem aqui

Mohan Dere
fonte
4

Anexe o seguinte trecho dentro de seu arquivo .row ou seu .col. Isso é para o Bootstrap 4 *.

d-flex justify-content-center
Thomas Chirwa
fonte
3

Como o koala_dev usou em sua abordagem 1, eu preferiria o método de deslocamento em vez do bloco central ou margens que têm uso limitado, mas como ele mencionou:

Agora, há uma desvantagem óbvia para esse método, que funciona apenas para tamanhos de coluna iguais; portanto, apenas .col-X-2, .col-X-4, col-X-6, col-X-8 e col-X- 10 são suportados.

Isso pode ser resolvido usando a seguinte abordagem para colunas ímpares.

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>
Abhinav Singh
fonte
3

Você pode usar a solução muito flexível flexbox no seu Bootstrap.

justify-content: center;

pode centralizar sua coluna.

Confira o flex .

Harsh
fonte
2

Como nunca tenho a necessidade de centralizar apenas uma .col-dentro de uma .row, defino a seguinte classe no agrupamento .rowde minhas colunas de destino.

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Exemplo

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>
Walter Roman
fonte
2

Para aqueles que desejam centralizar os elementos da coluna na tela quando você não tem o número exato para preencher sua grade, escrevi um pequeno pedaço de JavaScript para retornar os nomes das classes:

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

Se você possui 5 elementos e deseja 3 por linha em uma mdtela, faça o seguinte:

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

Lembre-se de que o segundo argumento deve ser dividido por 12.

jsgoupil
fonte
2

Para centralizar mais de uma coluna em uma linha do Bootstrap - e o número de csscolunas é ímpar, basta adicionar esta classe a todas as colunas nessa linha:

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}

Então, no seu HTML, você tem algo como:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>
Ruto Collins
fonte
2

Tente isto

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

Você pode usar outros col, bem como col-md-2, etc.

Ch UmarJamil
fonte
2

Sugiro simplesmente usar a classe text-center:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
Dadhich Sourav
fonte
2

Experimente este código.

<body class="container">
    <div class="col-lg-1 col-lg-offset-10">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Aqui eu usei col-lg-1, e o deslocamento deve ser 10 para centralizar adequadamente a div em dispositivos grandes. Se você precisar centralizar em dispositivos de médio a grande porte, altere lg para md e assim por diante.

Bangash
fonte
2

Solução Bootstrap 4 :

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>
JanBrus
fonte
1

Se você colocar isso em sua linha, todas as colunas internas serão centralizadas:

.row-centered {
    display: flex;
    justify-content: space-between;
}
Eran Shabi
fonte
fez o elemento não responder.
Gfivehost 17/07
1

Para ser mais preciso, o sistema de grade do Bootstrap contém 12 colunas e para centralizar qualquer conteúdo, digamos, por exemplo, que o conteúdo ocupa uma coluna. É necessário ocupar duas colunas da grade do Bootstrap e colocar o conteúdo na metade das duas colunas ocupadas.

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

'col-xs-offset-5' está dizendo ao sistema de grade por onde começar a colocar o conteúdo.

'col-xs-2' está dizendo ao sistema de grade quantas colunas restantes sobra o conteúdo deve ocupar.

'centrado' será uma classe definida que centralizará o conteúdo.

Aqui está como este exemplo se parece no sistema de grade do Bootstrap.

Colunas:

1 | 2 3 4 5 6 7 8 9 10 11 12

....... deslocamento ....... dados. .......não usado........

Tecnologia
fonte