Como centralizar um div com Bootstrap 2?

Question

http://twitter.github.com/bootstrap/scaffolding.html

Tentei como todas as combinações:

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

ou

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

alterou os números de intervalo e deslocamento ...

Mas não consigo colocar uma caixa simples perfeitamente centrada em uma página :(

Eu só quero uma caixa de 6 colunas centralizada ...

---

editar:

fez isso com

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

Mas a caixa é muito larga, há alguma maneira de fazer isso com o span7?

span7 offset2 fornece preenchimento extra à esquerda span7 offset3 preenchimento extra à direita ...

Answer 1

além de encolher o próprio div para o tamanho que você deseja, reduzindo o tamanho do span assim ... class="span6 offset3", class="span4 offset4", etc ... algo tão simples como style="text-align: center" no div pode ter o efeito que você está procurando

você não pode usar span7 com qualquer deslocamento definido e obter o intervalo centralizado na página (porque o total de spans= 12)

Answer 2

As extensões do Bootstrap são flutuadas para a esquerda.Para centralizá-los, basta substituir esse comportamento.Eu faço isso adicionando isto à minha folha de estilo:

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

Se você tiver essa classe definida, basta adicioná-la ao intervalo e pronto.

<div class="span7 center"> box </div>

Observe que esta classe central personalizada deve ser definida após o css de bootstrap.Você poderia usar !important, mas isso não é recomendado.

Answer 3

Bootstrap3 tem a classe .center-block que você pode usar.É definido como

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

Documentação aqui .

Answer 4

Se você deseja usar o bootstrap completo (e não o caminho esquerdo / direito automático), você precisa de um padrão que caiba em 12 colunas, por exemplo2 espaços em branco, 8 conteúdo, 2 espaços em branco.É isso que essa configuração fará. Ele cobre apenas as variantes -md- , eu tendo a ajustá-lo em tamanho real para pequenos adicionando col-xs-12

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

Answer 5

Parece que você só queria alinhar ao centro um único contêiner. A estrutura de bootstrap pode estar complicando aquele exemplo, você poderia ter apenas um div autônomo com seu próprio estilo, algo como:

<div class="login-container">
  <!-- Your Login Form -->
</div>

e estilo:

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

Isso deve funcionar bem se você estiver aninhado em algum lugar dentro de uma div bootstrap .container.

Answer 6

adicione os conteúdos centrais da classe

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}

Answer 7

O código @ZuhaibAli meio que funciona para mim, mas eu mudei um pouco:

Criei uma nova classe em css

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

então o div se torna

<div class="center col-md-6"></div>

Eu adicionei col-md-6 para a largura do próprio div, o que nesta situação significa que o div tem a metade do tamanho, há 1 -12 col md no bootstrap.

Answer 8

Siga esta orientação https://getbootstrap.com/docs/3.3/css/

Use .center-block

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