293 votos

vertical-alineado con bootstrap 3

http://jsfiddle.net/corinem/CQstd/

Estoy usando el bootstrap 3, y tengo problemas cuando quiero alinear verticalmente dos div por ejemplo

<div class="row">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid #000">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid #F00">Small</div>
   </div>
 </div>

Sistema de red de uso de Bootstrap float: left no display:inline-block así que la propiedad vertical-align no funciona. Intenté usar margin-top para arreglarlo, pero creo que no es una buena solución para el diseño de respuesta.

393voto

zessx Puntos 17769

Todavía puedes usar una clase personalizada cuando la necesites:

<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

Bootply


2014-05-10 : Editado para arreglar el problema del espacio extra

Usando inline-block añade un espacio extra entre bloques si dejas un espacio real en tu código (como ...</div> </div>... ). Este espacio extra rompe nuestra cuadrícula si los tamaños de las columnas suman 12 :

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Aquí, tenemos espacios extra entre <div class="[...] col-lg-2"> y <div class="[...] col-lg-10"> (un retorno de carro y 2 pestañas/8 espacios). Y así...

enter image description here

¡¡Pateemos este espacio extra!!

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

enter image description here

Fíjate en el aparentemente comentarios inútiles <!-- ... --> ? Son importante -- sin ellos, el espacio blanco entre el <div> los elementos ocuparán el espacio en la disposición, rompiendo el sistema de la red.

Nota: el Bootply ha sido actualizado

347voto

Hashem Qolami Puntos 22990

Diseño de caja flexible

Con la llegada de la Caja flexible de CSS muchas de las pesadillas de los diseñadores web 1 se han resuelto. Uno de los más difíciles, la alineación vertical. Ahora es posible incluso en alturas desconocidas .

"Dos décadas de hackeos de diseño están llegando a su fin. Tal vez no mañana, pero pronto, y por el resto de nuestras vidas."

- Legendario CSS Eric Meyer en W3Conf 2013

La Caja Flexible (o en forma abreviada, Flexbox), es un nuevo sistema de disposición que está diseñado específicamente para fines de disposición. La especificación estados :

La disposición de Flex es superficialmente similar a la disposición de los bloques. Carece de muchas las propiedades más complejas centradas en el texto o en el documento que pueden utilizarse en la disposición de los bloques, como flotadores y columnas. A cambio, gana simple y poderosas herramientas para distribuir el espacio y alinear el contenido de manera que las aplicaciones web y las páginas web complejas a menudo necesitan.

¿Cómo puede ayudar en este caso? Bueno, déjame mostrártelo, no más charlas.


Columnas alineadas verticalmente

Usando el twitter bootstrap tenemos .row está teniendo un poco de .col-* s. Todo lo que necesitamos hacer es mostrar la deseada .row 2 como un contenedor flexible y luego alinear todos sus artículo flexible s (las columnas) verticalmente por align-items propiedad.

EJEMPLO AQUÍ (Por favor, lea los comentarios con cuidado)

<div class="container">
    <div class="row vertical-align"> <!-- 
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>

.vertical-align {
    display: flex;
    align-items: center;
}

La salida

Vertical aligned columns in Twitter Bootstrap

El área coloreada muestra la caja de relleno de las columnas.

Aclarando sobre align-items: center

8.3 Alineación de ejes cruzados: la align-items propiedad

Artículos de flexión puede ser alineado en el eje transversal de la línea actual del contenedor flexible, similar a justify-content pero en la dirección perpendicular. align-items establece la alineación por defecto para todos los artículos del contenedor flexible, incluyendo los anónimos artículos de flexión .

align-items: center;
Por el valor central, el artículo flexible está centrada en la caja del margen de eje transversal dentro de la línea.

Nota importante #1: Usando .col-xs-* se recomiendan las clases. De lo contrario, puede tener problemas con los tamaños de pantalla más bajos.

Alternativamente, podrías apagar el diseño de Flexbox simplemente cambiando display: flex; a display: block; o especificando .vertical-align en tamaños de pantalla específicos así:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    .vertical-align {
        display: flex;
        align-items: center;
    }
}

Nota importante #2: La sintaxis de Flexbox ha sido cambiada durante el tiempo. La nueva sintaxis escrita no funcionará en versiones antiguas (¡no tan antiguas como IE9!) de navegadores web.

Esto significa que también deberías usar propiedades prefijadas por el vendedor como display: -webkit-box y así sucesivamente. Si haces clic en "Cambiar vista compilada" en el Demo verás la versión prefijada de las declaraciones CSS (Gracias a Autoprefijo ).


Columnas de altura completa con contenidos alineados verticalmente

Como ves en el demo anterior (los artículos flexibles) ya no son tan altas como su contenedor (la caja del contenedor flexible, es decir, el .row elemento).

Esto se debe al uso de center valor para align-items propiedad. El valor por defecto es stretch para que los elementos puedan llenar toda la altura del elemento padre.

Para arreglar eso, puedes simplemente usar display: flex; para las columnas también:

EJEMPLO AQUÍ (De nuevo, cuidado con los comentarios)

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items 
                              horizontally within the column  */
}

La salida

Full-height columns with vertical aligned contents in Twitter Bootstrap

El área coloreada muestra la caja de relleno de las columnas.

Estos recursos serían útiles para una lectura más profunda, incluida la compatibilidad con los navegadores:


1. Alinear verticalmente una imagen dentro de un div con altura de respuesta
2. Es mejor usar una clase adicional para no alterar el valor por defecto de Twitter Bootstrap .row .

16voto

user2249160 Puntos 260

pruebe esto en css de div:

display: table-cell;
vertical-align: middle;

5voto

babycakes Puntos 79

Realmente encuentro que el siguiente código me funciona mejor (usando Chrome, a punto de comprobar otros) que la respuesta actualmente seleccionada:

.v-center {display:table!important; height:125px;}

.v-center div[class*='col-'] {
display: table-cell!important;
vertical-align:middle;
float:none;
}
.v-center img {max-height:125px;}

(Fuente: http://www.bootply.com/DP76KprZFK )

Puede que tengas que modificar las alturas (específicamente en .v-center) y eliminar/cambiar el div en div[class*='col-'] para tus necesidades.

Editar: Por trabajar mejor, me refiero al trabajo en general. El otro no trabaja para mí.

-3voto

ATHER Puntos 104

Ok, me encontré con la misma situación en la que quería alinear algunos elementos de buceo verticalmente en una fila y encontré que las clases de bootstrap col-xx-xx aplican el estilo al buceo como flotador: a la izquierda, tuve que aplicar el estilo en los elementos de buceo como style="Float:none" y todos mis elementos de buceo comenzaron alineados verticalmente. Aquí está el ejemplo de trabajo.

 <div class="col-lg-4" style="float:none;">

http://jsfiddle.net/shatherali/g9ew460c/4/

En caso de que alguien quiera leer más sobre la propiedad flotante http://www.w3schools.com/cssref/pr_class_float.asp

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X