Como alinhar um ponto morto de uma imagem com um bootstrap

I'm usando a estrutura bootstrap e tentando obter uma imagem centrada horizontalmente sem sucesso...

I'tentei várias técnicas, como dividir o sistema de 12 grades em 3 blocos iguais, por exemplo

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

Qual'é o método mais fácil para obter uma imagem centrada em relação à página?

GEOCHET
Pergunta editada :em
Programação
css twitter-bootstrap
4º junho 2012 в 10:40
6 vistas

A bootstrap do Twitter tem uma classe que centra: .paginação centrada

Funcionou para mim:

<div class="row-fluid">
   <div class="span12 pagination-centered">![header](header.png)</div>
</div>

O css para a turma é:

.pagination-centered {
  text-align: center;
}
Comentários (2)

Assumindo que não há mais nada ao lado da imagem, a melhor maneira é utilizar o text-align: center no img parent:

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

Edit

Como mencionado nas outras respostas, você pode adicionar a classe bootstrap CSS `.text-center' ao elemento pai. Isto faz exatamente a mesma coisa e está disponível tanto em v2.3.3 como em v3

My Head Hurts
Resposta editada :em
Comentários (4)

Você poderia mudar o CSS da solução anterior como abaixo:

.container, .row { text-align: center; }

Isto também deve centralizar todos os elementos no div dos pais.

Comentários (0)