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?
A bootstrap do Twitter tem uma classe que centra: .paginação centrada
Funcionou para mim:
<div class="row-fluid">
<div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>
O css para a turma é:
.pagination-centered {
text-align: center;
}
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