vertically - html vertical align bootstrap
vertical-alinear: medio con Bootstrap 2 (5)
Además de las respuestas anteriores, siempre puedes usar también el tirón attrib:
<ol class="row" id="possibilities">
<li class="span6">
<div class="row">
<div class="span3">
<p>some text here</p>
<p>Text Here too</p>
</div>
<figure class="span3 pull-right"><img src="img/screenshots/options.png" alt="Some text" /></figure>
</div>
</li>
<li class="span6">
<div class="row">
<figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
<div class="span3">
<p>Some text</p>
<p>Some text here too.</p>
</div>
</div>
</li>
Utilizo Twitter bootstrap y quería alinear verticalmente un bloque div con una imagen y el texto a la derecha.
Aquí está el código:
<ol class="row" id="possibilities">
<li class="span6">
<div class="row">
<div class="span3">
<p>some text here</p>
<p>Text Here too</p>
</div>
<figure class="span3"><img src="img/screenshots/options.png" alt="Some text" /></figure>
</div>
</li>
<li class="span6">
<div class="row">
<figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
<div class="span3">
<p>Some text</p>
<p>Some text here too.</p>
</div>
</div>
</li>
</ol>
Intenté esto pero no wortks:
.span6 .row{display: table;}
.span6 .row .span3, .span6 .row figure{display:table-cell; vertical-align: middle;}
Intenté esto también:
.span6 .row .span3{display: inline-block; vertical-align: middle;}
Ninguno está funcionando. ¿Alguien tiene una idea? Gracias por adelantado.
Intente eliminar el atributo float de span6:
{ float:none !important; }
Prueba esto:
.row > .span3 {
display: inline-block !important;
vertical-align: middle !important;
}
Editar:
Fiddle: http://jsfiddle.net/EexYE/
Es posible que deba agregar el float: none !important; de Diego float: none !important; también si span3 está flotando e interfiere.
Editar:
Fiddle: http://jsfiddle.net/D8McR/
En respuesta a Alberto: si arreglas la altura de la fila div, entonces para continuar con la alineación central vertical necesitarás configurar la altura de línea de la fila para que sea igual a la altura del píxel de la fila (es decir, ambos a 300px en tu caso). Si lo haces, verás que los elementos secundarios heredan la altura de la línea, que es un problema en este caso, por lo que necesitarás establecer la altura de tu línea para span3s a lo que realmente debería ser (1.5 es la valor de ejemplo en el violín, o 1.5 x el tamaño de fuente, que no cambiamos cuando cambiamos la altura de la línea).
Si recuerdo correctamente por mi propio uso de bootstrap, las clases .spanN están flotando, lo que las hace comportarse automáticamente como display: block . Para display: table-cell trabajo de display: table-cell , debe eliminar el flotador.
yo uso esto
<style>
html, body{height:100%;margin:0;padding:0 0}
.container-fluid{height:100%;display:table;width:100%;padding-right:0;padding-left: 0}
.row-fluid{height:100%;display:table-cell;vertical-align:middle;width:100%}
.centering{float:none;margin:0 auto}
</style>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="offset3 span6 centering">
content here
</div>
</div>
</div>
</body>