A continuación se muestra el código que estoy usando en mi html con twitter-bootstrap. Estoy tratando de alinear el centro de la salida, pero la imagen se alinea a la izquierda no importa lo que hago.Alinee las miniaturas horizontalmente en el centro
<ul class="thumbnails">
<li class="span5">
<a href="#" class="thumbnail"><img src="img.jpg" /></a>
</li>
</ul>
¿Alguna solución simple?
miniaturas Twitter de arranque se hacen flotar a la izquierda por defecto, usted tiene que sustituir dicho comportamiento en su propia hoja de estilos con el fin de hacerlos central centran su contenedor con los text-align:center y display:inline-block propiedades. Prueba esto:
CSS
.thumbnails {
text-align:center;
}
.thumbnails > li {
display: inline-block;
*display:inline; /* ie7 fix */
float: none; /* this is the part that makes it work */
}
De esta manera las imágenes de miniatura se centrarán en el interior del contenedor .thumbnails. Reemplazar la clase .thumbnail con el recipiente desea centrar sus imágenes en
Woah woah woah, este es el primero en mi vida que veo esa> sintaxis en CSS. Qué significa eso? –
@Leonnears Se llama [selector de niños] (http://www.w3.org/TR/CSS2/selector.html#child-selectors) y se utiliza para seleccionar solo todos los elementos secundarios de un elemento, en lugar de todos elementos coincidentes dentro. En este caso, se usa para seleccionar los elementos de la lista del primer nivel (hijos) del contenedor '.thumbnails'. –
Si usa text-align: center; y da imgdisplay: inline-block;, debe quedar centrada.
he encontrado que esto funciona más fácil para Bootstrap:.
.thumbnails > li {
float: right;
margin-bottom: 18px;
margin-left: 20px;
}
simplemente he cambiado de "flotación" de "izquierda" a la "derecha"
encontré que esto funciona: – jstreebin
Crea una nueva fila para la imagen. Utilice el desplazamiento en función del tamaño de la imagen apropiado, por ejemplo:
<div class="span8 offset2" >
esto es simple sólo tiene que añadir:
<div class="thumbnail" style="margin:0px auto;">whatever image tag here ...</div>
la esperanza que esto era útil
'text-align: center' en el' li' – powerbuoy
ya lo intenté, ¡sin efecto! ; ( – Sushil
A menos que los 'li's sean' display: inline' o 'img's son' display: block' que deberían funcionar. ¿Podría mostrar el sitio/código? – powerbuoy