alineación vertical con Bootstrap 3


889

Estoy usando Twitter Bootstrap 3, y tengo problemas cuando quiero alinear verticalmente dos div, por ejemplo: enlace JSFiddle :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<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>

El sistema de cuadrícula en Bootstrap usa float: left, no display:inline-block, por lo que la propiedad vertical-alignno funciona. Intenté usarlo margin-toppara solucionarlo, pero creo que esta no es una buena solución para el diseño receptivo.


1
no no, quiero alinear verticalmente el 2 div, no el texto dentro, algo como esto jsfiddle.net/corinem/Aj9H9 pero en este ejemplo no uso bootstrap
corinem


66
IMPORTANTE: Ambas columnas necesitan la clase "vcenter". De lo contrario, no funcionará. Pasé hora por hora ahora solo descubriendo eso.
Cymro

ninguna de las respuestas funciona perfectamente para Chrome IE8 y dispositivos móviles con una fila que contiene 5 col- (y 3 col- en dispositivos móviles)
amdev

En Bootstrap 4, la alineación central vertical es muy diferente: stackoverflow.com/a/41464397/171456
Zim,

Respuestas:


938

Esta respuesta presenta un truco, pero le recomiendo que use flexbox (como se indica en la respuesta de @Haschem ), ya que ahora es compatible en todas partes.

Enlace de demostración:
- Bootstrap 3
- Bootstrap 4 alpha 6

Todavía puede usar una clase personalizada cuando la necesite:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
<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>

Bootply

El uso inline-blockagrega espacio adicional entre bloques si deja un espacio real en su código (como ...</div> </div>...). Este espacio adicional rompe nuestra cuadrícula si los tamaños de columna 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 adicionales entre <div class="[...] col-lg-2">y <div class="[...] col-lg-10">(un retorno de carro y 2 pestañas / 8 espacios). Y entonces...

Ingrese la descripción de la imagen aquí

¡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>

Ingrese la descripción de la imagen aquí

Observe los comentarios aparentemente inútiles <!-- ... -->? Son importantes : sin ellos, el espacio en blanco entre los <div>elementos ocupará espacio en el diseño, rompiendo el sistema de cuadrícula.

Nota: Bootply ha sido actualizado


18
Esto se rompe si especifica cuadrículas de columnas que suman 12 (por ejemplo, usando col-lg-2y col-lg-10). Curiosamente, si agrega el siguiente código JS (suponiendo jQuery), se las arreglará solo:$('.row').html($('.vcenter'));
Jake Z

8
@pasemes Esto es causado por el inline-block espacio adicional (bien conocido) . Doy una solución en mi edición.
zessx

92
La parte con los comentarios en blanco se siente como magia profunda, oscura y malvada. Y es. Pero alguien en algún lugar decidió que debería funcionar, y así es.
cfstras

55
Sorprendido, nadie mencionó esto todavía, pero, en lugar del comentario, puede establecer "font-size: 0;" en el padre de los divs de bloque en línea para eliminar el "espacio misterioso"
Poff

44
No es necesario usar ningún comentario html <! - -> ni ningún código javascript para solucionar el problema de espacio adicional, hay un truco CSS simple y efectivo: márgenes negativos. Simplemente agregue el margen derecho: -4px; a la clase .vcenter. Probado y trabajando con todos los navegadores (excepto el antiguo IE6 e IE7 ... pero a quién le importa la prehistoria;))
Frank

897

Diseño de caja flexible

Con el advenimiento de CSS Flexible Box , muchas de las pesadillas de los diseñadores web 1 se han resuelto. Uno de los más hacky, la alineación vertical. Ahora es posible incluso en alturas desconocidas .

"Dos décadas de hacks de diseño están llegando a su fin. Quizás no mañana, sino pronto, y por el resto de nuestras vidas".

- El legendario CSS Eric Meyer en W3Conf 2013

Flexible Box (o en resumen, Flexbox), es un nuevo sistema de diseño que está específicamente diseñado para fines de diseño. La especificación establece :

El diseño flexible es superficialmente similar al diseño de bloque. Carece de muchas de las propiedades más complejas centradas en texto o documento que se pueden usar en el diseño de bloques, como flotantes y columnas. A cambio, obtiene herramientas simples y poderosas para distribuir el espacio y alinear el contenido de la manera que las aplicaciones web y las páginas web complejas a menudo necesitan.

¿Cómo puede ayudar en este caso? Bien, veamos.


Columnas alineadas verticales

Usando Twitter Bootstrap tenemos .rows teniendo algunos .col-*s. Todo lo que necesitamos hacer es mostrar el .row2 deseado como una caja de contenedor flexible y luego alinear todo su elemento flexible verticalmente (las columnas)align-items propiedad.

EJEMPLO AQUÍ (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

Columnas alineadas verticales en Twitter Bootstrap

El área coloreada muestra el cuadro de relleno de las columnas.

Aclarando sobre align-items: center

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

Los elementos flexibles se pueden alinear en el eje transversal de la línea actual del contenedor flexible, de forma similar justify-contentpero en la dirección perpendicular. align-itemsestablece la alineación predeterminada para todos los elementos del contenedor flexible, incluidos los anónimos los elementos flexibles .

align-items: center; Por valor central, el cuadro de margen del elemento flexible está centrado en el eje transversal dentro de la línea.


Gran alerta

Nota importante n. ° 1: Twitter Bootstrap no especifica el número widthde columnas en dispositivos extra pequeños, a menos que asigne una de las .col-xs-#clases a las columnas.

Por lo tanto, en esta demostración en particular, he usado .col-xs-*clases para que las columnas se muestren correctamente en modo móvil, porque especifica widthexplícitamente la columna.

Pero, alternativamente, puede desactivar el diseño de Flexbox simplemente cambiando display: flex;a display: block;tamaños de pantalla específicos. Por ejemplo:

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

O puede especificar .vertical-align solo en tamaños de pantalla específicos de esta manera:

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

En ese caso, seguiría el enfoque de @KevinNelson .

Nota importante # 2: omiten los prefijos de proveedor debido a la brevedad. La sintaxis de Flexbox ha cambiado durante el tiempo. La nueva sintaxis escrita no funcionará en versiones anteriores de navegadores web (¡pero no tan antigua como Internet Explorer 9! Flexbox es compatible con Internet Explorer 10 y versiones posteriores).

Esto significa que también debe usar propiedades con prefijo de proveedor como display: -webkit-box etc., en modo de producción.

Si hace clic en "Alternar vista compilada" en la demostración , verá la versión prefijada de las declaraciones CSS (gracias a Autoprefixer ).


Columnas de altura completa con contenido alineado verticalmente

Como puede ver en la demostración anterior , las columnas (los elementos flexibles) ya no son tan altas como su contenedor (la caja del contenedor flexible)..row elemento).

Esto se debe al uso de centervalor para la align-itemspropiedad. El valor predeterminado es stretchpara que los elementos puedan llenar toda la altura del elemento primario.

Para arreglar eso, también puede agregar display: flex;a las columnas:

EJEMPLO AQUÍ (Nuevamente, tenga en cuenta 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

Columnas de altura completa con contenido alineado verticalmente en Twitter Bootstrap

El área coloreada muestra el cuadro de relleno de las columnas.

Por último, pero no menos importante , tenga en cuenta que las demostraciones y los fragmentos de código aquí están destinados a darle una idea diferente, para proporcionar un enfoque moderno para lograr el objetivo. Tenga en cuenta la sección " Big Alert " si va a utilizar este enfoque en sitios web o aplicaciones del mundo real.


Para leer más, incluido el soporte del navegador, estos recursos serían útiles:


1. Alinee verticalmente una imagen dentro de un div con altura receptiva 2. Es mejor usar una clase adicional para no alterar el valor predeterminado de Twitter Bootstrap .row.


99
Después de un poco de investigación, descubrí que HTML5Please.com dice que hay suficiente soporte para usarlo. ¡Eso es bastante asombroso! html5please.com/#flexbox
Alec Moore

66
Esta es realmente la mejor solución y debería tener más soporte. Y, por supuesto, nosotros, los desarrolladores, debemos usarlo tanto como podamos para propagarlo.
Mateus Neves

12
Intenté esto y no estaba funcionando para mí de la manera esperada, hasta que edité tus violines y me di cuenta de que esto es totalmente inútil y una pérdida de tiempo. Hacer esto pierde por completo el objetivo del diseño receptivo, ya que las columnas ya no se apilarán una encima de la otra cuando no encajan en la pantalla, lo que hace que la necesidad de bootstrap sea totalmente inútil y que su sitio no responda. Para ver lo que quiero decir, cambie cualquier col-xs- * a col-xs-12 en los ejemplos respectivos, haga que la pantalla de su navegador sea muy pequeña (como un dispositivo móvil) y vea los resultados: no más capacidad de respuesta.
Pere

8
@HashemQolami, aunque está utilizando clases con nombre col-*, sus violines / codepens no utilizan bootstrap, por lo que son engañosos. Tus ejemplos no funcionan con bootstrap; su sistema de cuadrícula no se basa flex, por lo tanto, son incompatibles. Simplemente pruebe cualquiera de sus ejemplos en una página de arranque y se dará cuenta de que no funcionan.
Pere

55
@Hashem Qolami todavía no puede encontrar ningún caso de uso para sus sugerencias. Una de las características principales y distintivas de Bootstrap es que las columnas se apilan una encima de la otra una vez que no encajan horizontalmente. Eso ya no sucede con tu solución. El sistema de cuadrícula funciona incluso si carga solo los estilos, como puede ver en este violín . No js; solo css. Cambie el tamaño del área de representación y responderá. Eso no sucede en ninguno de tus ejemplos. Se pierde el enfoque "móvil primero", lo que hace innecesario Bootstrap. Entonces esta respuesta es incorrecta, engañosa o incompleta.
Pere

48

El siguiente código funcionó para mí:

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

44
La solución más simple en mi humilde opinión
saiyancoder

3
¿Alguien tiene una solución que funcione con una sola columna? Tengo una fila, y luego dentro de un col-md-6. Esta solución y el resto de las Flexbox solo funcionan cuando hay 2 columnas
Ka Mok

36

Actualización 2020

Sé que la pregunta original era para Bootstrap 3, pero ahora que se ha lanzado Bootstrap 4, aquí hay una guía actualizada sobre el centro vertical.

¡Importante! El centro vertical es relativo a la altura del padre

Si el elemento primario del elemento que intenta centrar no tiene una altura definida , ninguna de las soluciones de centrado vertical funcionará!

Bootstrap 4

Ahora que Bootstrap 4 es flexbox por defecto, hay muchos enfoques diferentes para la alineación vertical usando: márgenes automáticos , utilidades de flexbox o las utilidades de visualización junto con las utilidades de alineación vertical . Al principio, "utilidades de alineación vertical" parece obvio, pero estas solo funcionan con elementos de visualización en línea y de tabla. Aquí hay algunas opciones de centrado vertical Bootstrap 4.


1 - Centro vertical usando márgenes automáticos:

Otra forma de centrar verticalmente es usar my-auto. Esto centrará el elemento dentro de su contenedor. Por ejemplo, h-100hace que la fila tenga toda la altura y my-autocentrará verticalmente la col-sm-12columna.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Bootstrap 4: centro vertical con márgenes automáticos Demo

my-auto representa los márgenes en el eje vertical y y es equivalente a:

margin-top: auto;
margin-bottom: auto;

2 - Centro vertical con Flexbox:

Columnas de cuadrícula central vertical

Dado que Bootstrap 4 .rowes ahora display:flex, simplemente puede usarlo align-self-centeren cualquier columna para centrarlo verticalmente ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

o, use align-items-centeren su totalidad .rowpara alinear verticalmente en el centro todo col-*en la fila ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Bootstrap 4 - centro vertical de altura diferentes columnas de demostración


3 - Centro vertical usando las utilidades de pantalla:

Bootstrap 4 tiene utils de visualización que se pueden utilizar para display:table, display:table-cell, display:inline, etc .. Estos pueden ser usados con los utils de alineación vertical a inline align, elementos de celda de tabla inline-block o.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Bootstrap 4 - Centro vertical usando utilidades de pantalla Demo

Ver también: Centro de alineación vertical en Bootstrap 4


Bootstrap 3

Método Flexbox en el contenedor de los artículos a centrar:

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

Transformar método de traducción:

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

.transform-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Mostrar método en línea:

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

Demostración de los métodos de centrado de Bootstrap 3


1
Aquí está la documentación de Bootstrap para mx-auto(centrado horizontal), por lo que tiene sentido que se centre my-autoverticalmente (eje y).
xinthose


21

Pensé en compartir mi "solución" en caso de que ayude a cualquier otra persona que no esté familiarizada con las consultas @media.

Gracias a la respuesta de @ HashemQolami, construí algunas consultas de medios que funcionarían en dispositivos móviles como las clases col- * para poder apilar los col- * para dispositivos móviles pero mostrarlos alineados verticalmente en el centro para pantallas más grandes, por ejemplo

<div class='row row-sm-flex-center'>
    <div class='col-xs-12 col-sm-6'></div>
    <div class='col-xs-12 col-sm-6'></div>
</div>

.

.row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

Los diseños más complicados que requieren un número diferente de columnas por resolución de pantalla (p. Ej., 2 filas para -xs, 3 para -sm y 4 para -md, etc.) necesitarían una determinación más avanzada, pero para una página simple con -xs apilados y -sm y más grandes en filas, esto funciona bien.


En mi caso, tuve que agregar un clear: both;a las clases dentro de las consultas de medios para que esto funcione.
motaa

1
@motaa, Perdón por la confusión ... De la manera BS3, como puedes ver en mi ejemplo HTML, lo uso como un .rowmodificador ... así debería verse class="row row-sm-flex-center". La .rowdefinición BS3 maneja elclear:both;
Kevin Nelson

Debería haber analizado su código html más a fondo. :) Sin embargo, también uso el modificador .row, pero en mi caso (wordpress), se ha cambiado en el tema principal, lo que finalmente me llevó a agregar el clear: both;nuevo.
motaa

21

Después de la respuesta aceptada, si no desea personalizar el marcado, por separación de preocupaciones o simplemente porque usa un CMS, la siguiente solución funciona bien:

.valign {
  font-size: 0;
}

.valign > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
   <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>

La limitación aquí es que no puede heredar el tamaño de fuente del elemento padre porque la fila establece el tamaño de fuente en 0 para eliminar el espacio en blanco.



17

Esta es mi solución Simplemente agregue esta clase a su contenido CSS.

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

Entonces su HTML se vería así:

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <title>Title</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 align-middle">
          <div class="col-xs-6" style="background-color:blue;">
            <h3>Item</h3>
            <h3>Item</h3>
          </div>
          <div class="col-xs-6" style="background-color:red;">
            <h3>Item</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>


1
Esto rompe las clases receptivas, como col-md-6
Lucas Bustamante

15

Acabo de hacer esto y hace lo que quiero que haga.

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

Y ahora mi página se ve así

<div class='container-fluid align-middle'>
    content

 +--------------------------------+
 |                                |
 |  +--------------------------+  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  +--------------------------+  |
 |                                |
 +--------------------------------+

El problema con este enfoque es que no parece funcionar cuando el DIV tiene una altura especificada: jsfiddle.net/4bpxen25/1 Recomiendo: stackoverflow.com/a/28519318/1477388
user1477388

10

Realmente encuentro que el siguiente código funciona usando Chrome y no otros navegadores 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;
}

Enlace de arranque

Es posible que deba modificar las alturas (específicamente en .v-center) y eliminar / cambiar la división según div[class*='col-']sus necesidades.


8

Me encontré con este mismo problema. En mi caso no sabía la altura del contenedor externo, pero así es como lo arreglé:

Primero ajuste la altura de sus htmly bodyelementos para que sean 100%. ¡Esto es importante! Sin esto, las htmly bodylos elementos simplemente heredar la altura de sus hijos.

html, body {
   height: 100%;
}

Luego tuve una clase de contenedor externo con:

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

Y, por último, el contenedor interno con clase:

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

HTML es tan simple como:

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

Esto es todo lo que necesita para alinear verticalmente los contenidos. Compruébalo en violín:

Jsfiddle


8

No hay necesidad de tablas y celdas de tabla. Se puede lograr fácilmente usando transform.

Ejemplo: http://codepen.io/arvind/pen/QNbwyM

Código:

.child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>


7

Si está utilizando el Less versión de Bootstrap y está compilando en CSS usted mismo, puede usar algunas clases de utilidad para usar con las clases de Bootstrap.

He descubierto que estos funcionan fantásticamente bien donde quiero preservar la capacidad de respuesta y la capacidad de configuración del sistema de cuadrícula Bootstrap (como usar -mdo-sm ), pero quiero que todas las columnas de una fila dada tengan la misma altura vertical (para que pueda luego alinee verticalmente su contenido y haga que todas las columnas de la fila compartan un medio común).

CSS / Menos:

.display-table {
    display: table;
    width: 100%;
}
.col-md-table-cell {
    @media (min-width: @screen-md-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.col-sm-table-cell {
    @media (min-width: @screen-sm-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.vertical-align-middle {
    vertical-align: middle;
}

HTML:

<div class="row display-table">
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
</div>

6

Expliqué un poco la respuesta de zessx , para facilitar su uso al mezclar diferentes tamaños de columna en diferentes tamaños de pantalla.

Si usa Sass , puede agregar esto a su archivo scss:

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

Lo que genera el siguiente CSS (que puede usar directamente en sus hojas de estilo, si no está usando Sass):

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

Ahora puede usarlo en sus columnas receptivas como esta:

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>

¡Esto es realmente lindo!
Pietro Coelho

Votó a favor solo por la sintaxis corta y el uso de MENOS variables
Eduard Luca

5

Los comportamientos de Flex se admiten de forma nativa desde Bootstrap 4. Agregue d-flex align-items-centerel rowdiv. Ya no necesita modificar su contenido CSS.

Ejemplo simple: http://jsfiddle.net/vgks6L74/

<!-- language: html -->
<div class="row d-flex align-items-center">
  <div class="col-5 border border-dark" style="height:10em">  Big </div>
  <div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>

Con su ejemplo: http://jsfiddle.net/7zwtL702/

<!-- language: html -->
<div class="row d-flex align-items-center">
    <div class="col-5">
        <div class="border border-dark" style="height:10em">Big</div>
    </div>
    <div class="col-2">
        <div class="border border-danger" style="height:3em">Small</div>
   </div>
</div>

Fuente: Flex · Bootstrap


4

OK, accidentalmente mezclé algunas soluciones, y finalmente funciona ahora para mi diseño, donde intenté hacer una tabla 3x3 con columnas Bootstrap en la resolución más pequeña.

/* Required styles */

#grid a {
  display: table;
}

#grid a div {
  display: table-cell;
  vertical-align: middle;
  float: none;
}


/* Additional styles for demo: */

body {
  padding: 20px;
}

a {
  height: 40px;
  border: 1px solid #444;
}

a > div {
  width: 100%;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="grid" class="clearfix row">
  <a class="col-xs-4 align-center" href="#">
    <div>1</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>2</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>3</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>4</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>5</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>6</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>7</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>8</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>9</div>
  </a>
</div>


2

    div{
        border: 1px solid;
    }
    span{
        display: flex;
        align-items: center;
    }
    .col-5{
        width: 100px;
        height: 50px;
        float: left;
        background: red;
    }
    .col-7{
        width: 200px;
        height: 24px;

        float: left;
        background: green;
    }
    <span>
        <div class="col-5">
        </div>
        <div class="col-7"></div>
    </span>


1

Prueba esto,

.exe {
  font-size: 0;
}

.exe > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row  exe">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid grey">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid red">Small</div>
   </div>
 </div>


1

Hay varias formas de hacerlo:

  1. Utilizar 

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

    y el CSS del contenedor para

    display: table;
  2. Utilice el relleno junto con la pantalla multimedia para cambiar el relleno en relación con el tamaño de la pantalla. Google @media pantalla para saber más.

  3. Usar relleno relativo

    Es decir, especifique el relleno en términos de%


0

Con Bootstrap 4 (que actualmente está en alfa) puede usar la .align-items-centerclase. Para que pueda mantener el carácter receptivo de Bootstrap. Funciona de inmediato bien para mí. Consulte la documentación de Bootstrap 4 .


Esto solo funciona para algunos elementos cuando se muestra el elemento contenedor: flex.
Zim

0

HTML

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

CSS

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

-4

Me encontré con la misma situación en la que quería alinear algunos elementos div verticalmente en una fila y descubrí que las clases Bootstrap col-xx-xx aplican el estilo al div como flotante: izquierda.

Tuve que aplicar el estilo en los elementos div como style = "Float: none" y todos mis elementos div comenzaron a alinearse verticalmente. Aquí está el ejemplo de trabajo:

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

JsFiddle Link

En caso de que alguien quiera leer más sobre la propiedad flotante:

W3Schools - Flotador


Esto no está funcionando para mí. Probé en Firefox y Chrome. Todos los paneles están apilados verticalmente.
Alf

flotante: ninguno los hará apilados verticalmente, así es como debería funcionar.
ATHER

1
Entonces es la respuesta correcta para una pregunta diferente. ;)
Alf
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.