Estoy usando el marco de bootstrap y tratando de conseguir una imagen centrada horizontalmente sin éxito..
I'he probado varias técnicas como la división del sistema de rejilla 12 en 3 bloques iguales e.g
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
¿Cuál es el método más fácil para conseguir una imagen centrada en relación con la página?
Twitter bootstrap tiene una clase que centra: .pagination-centered
A mí me ha funcionado:
<div class="row-fluid">
<div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>
El css de la clase es:
.pagination-centered {
text-align: center;
}
Asumiendo que no hay nada más al lado de la imagen, la mejor manera es usar text-align: center
en el padre img
:
.row .span4 {
text-align: center;
}
Editar
Como se ha mencionado en las otras respuestas, puedes añadir la clase CSS de bootstrap .text-center
al elemento padre. Esto hace exactamente lo mismo y está disponible tanto en v2.3.3 como en v3