html - vertically - alinear verticalmente con Bootstrap 3

centrar verticalmente bootstrap 4

Question

Estoy usando Twitter Bootstrap 3, y tengo problemas cuando quiero alinear verticalmente dos div , por ejemplo, el 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 , not display:inline-block , por lo que la propiedad vertical-align no funciona. Intenté usar el margin-top para solucionarlo, pero creo que esta no es una buena solución para el diseño sensible.

Answer 1

Esta respuesta presenta un hack, pero te recomendaría que uses flexbox (como se indica en @Haschem answer ), ya que ahora se admite en todas partes.

Enlace de demos:
- Bootstrap 3
- Bootstrap 4 alpha 6

Aún puedes usar una clase personalizada cuando la necesites:

.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-block agrega 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...

¡¡Vamos a patear 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>

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

Nota: el Bootply ha sido actualizado

Answer 2

Diseño de la caja flexible

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

"Dos décadas de trucos de diseño están llegando a su fin. Tal vez no mañana, pero 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á diseñado específicamente para propósitos de diseño. La especificación establece :

El diseño flexible es superficialmente similar al diseño de bloques. Carece de muchas de las propiedades más complejas de texto o documento que se pueden usar en el diseño de bloques, como flotadores y columnas. A cambio, obtiene herramientas simples y poderosas 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? Bien, veamos.

Columnas alineadas verticales

Usando Twitter Bootstrap tenemos .row s teniendo algunos .col-* s. Todo lo que tenemos que hacer es mostrar el .row ² deseado como una caja de contenedor flexible y luego alinear todos sus elementos flexibles s (las columnas) verticalmente por la propiedad align-items .

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

Área coloreada muestra el cuadro de relleno de columnas.

Aclaración de elementos de align-items: center

align-items

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

align-items: center; Por valor del centro, el cuadro de margen del elemento flexible se centra en el eje transversal dentro de la línea.

Gran alerta

Nota importante # 1: Twitter Bootstrap no especifica el width de las columnas en dispositivos extra pequeños, a menos que le dé una de las .col-xs-# a las columnas.

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

Pero, alternativamente, puede desactivar el diseño de Flexbox simplemente cambiando la display: flex; para display: block; en 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 como:

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

En ese caso, me gustaría ir con el approach @KevinNelson .

Nota importante # 2: Los prefijos de proveedores se omiten 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 prefijadas por el proveedor como display: -webkit-box y así sucesivamente en el modo de producción.

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

Columnas de altura completa con contenido alineado verticalmente.

Como se ve en la demostración anterior , las columnas (los elementos de flexión) ya no son tan altas como su contenedor (la caja del contenedor de flexión, es decir, el elemento de .row ).

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

Para arreglar eso, puedes agregar display: flex; a 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

Área coloreada muestra el cuadro de relleno de columnas.

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

Para obtener más información, incluida la compatibilidad con el navegador, estos recursos serían útiles:

• Red de desarrolladores de Mozilla - Cajas flexibles
• Guía Para Flexbox - Trucos CSS
• HTML5Rocks - Flexbox rápido
• SmashingMagazine - Elementos de centrado con Flexbox
• Philip Walton - resuelto por Flexbox
• Puedo usar: módulo de diseño de caja flexible

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

Answer 3

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

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

Y ahora mi página parece

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

 ----------------------------------
 |                                |
 |   --------------------------   |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |   --------------------------   |
 |                                |
 ----------------------------------

Answer 4

Bien, accidentalmente he mezclado algunas soluciones, y finalmente ahora funciona para mi diseño, donde intenté hacer una tabla de 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>

Answer 5

Con Bootstrap 4 (que está en alfa actualmente) puede usar la .align-items-center . Así que puedes mantener el carácter responsivo de Bootstrap. Trabaja de inmediato bien para mí. Ver la documentación de Bootstrap 4 .

Answer 6

El siguiente código funcionó para mí:

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

Answer 7

Esta es mi solución. Solo agrega esta clase a tu css.

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

Entonces tu 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>

Answer 8

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;
}

Answer 9

Hay varias maneras de hacerlo

1.

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

y el css del contenedor a

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. Pantalla de Google @media para saber más.

3. Utilice el relleno relativo, es decir, especifique el relleno en términos de%

Espero eso ayude

Answer 10

Intenta esto en el CSS del div:

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

Answer 11

Los comportamientos de Flex son soportados de forma nativa desde Bootstrap 4. Agregue d-flex align-items-center en la row div. Ya no necesitas modificar tu 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: https://getbootstrap.com/docs/4.0/utilities/flex/

Answer 12

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

Primero establece la altura de tus elementos html y body para que sean 100%. ¡Esto es importante! Sin esto, los elementos html y del body simplemente heredarán la altura de sus hijos.

html, body {
   height: 100%;
}

Luego tuve una clase de contenedor exterior con:

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

Y por último el contenedor interior 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 necesitas para alinear verticalmente los contenidos. Échale un vistazo en el violín:

Jsfiddle

Answer 13

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

Tuve que aplicar el estilo en los elementos div como style = "Float: none" y todos mis elementos div empezaron alineados 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:

Escuelas W3 - Flotador

Answer 14

No hay necesidad de tablas y celdas de tabla. Se puede lograr fácilmente utilizando transformar. 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>

Answer 15

Pensé en compartir mi "solución" en caso de que ayude a alguien que no esté familiarizado con las consultas de @media.

Gracias a la respuesta de @HashemQolami, construí algunas consultas de medios que funcionaban de forma móvil como las clases de col- * para poder apilar el col- * para móviles pero mostrarlas alineadas 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 (por ejemplo, 2 filas para -xs, 3 para -sm y 4 para -md, etc.) necesitarían un finagling más avanzado, pero para una página simple con -xs apiladas y -sm y más grandes en filas, esto funciona bien.

Answer 16

Prefiero este método según el centro de CSS vertical de David Walsh :

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

La transform no es esencial; Simplemente encuentra el centro un poco más preciso. Internet Explorer 8 puede estar ligeramente menos centrado como resultado, pero aún así no está mal. ¿Puedo usarlo? Transforma 2d .

Answer 17

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>

Answer 18

Realmente encuentro que el siguiente código funciona con Chrome y no con otros navegadores que la respuesta seleccionada actualmente:

.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 Bootply

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

Answer 19

Si está utilizando la versión Less de Bootstrap y está compilando en CSS, puede usar algunas clases de utilidades para usar con las clases de Bootstrap.

Descubrí 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 -md o -sm ), pero quiero que todas las columnas de una fila dada tengan la misma altura vertical ( para que luego pueda alinear verticalmente su contenido y hacer 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>

Answer 20

Siguiendo la respuesta aceptada, si no desea personalizar el marcado, para la separación de inquietudes 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 principal porque la fila establece el tamaño de fuente en 0 para eliminar el espacio en blanco.

Answer 21

Actualización 2018

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 principal del elemento que intenta centrar no tiene una altura definida, ¡ ninguna de las soluciones de centrado vertical funcionará!

Bootstrap 4

Ahora que BS4 es flexbox por defecto, hay muchos enfoques diferentes para la alineación vertical usando: auto-margins , utilidades de flexbox o utilidades de pantalla junto con utils de alineación vertical . Al principio, la "alineación vertical de utilidades" parece obvia, pero solo funcionan con elementos de visualización en línea y de tabla. Aquí hay algunas opciones de centrado vertical de Bootstrap 4.

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

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

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

BS4 - Centro vertical utilizando auto-márgenes Demo

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

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

2 - Centro vertical con Flexbox:

Ya que Bootstrap 4 .row está ahora en display:flex , simplemente puede usar align-self-center en 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-center en toda la .row para .row verticalmente todos los 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>

BS4 - Columnas verticales de altura diferente centro Demo

3 - Centro vertical usando Utilidades de pantalla:

Bootstrap 4 tiene utilidades de visualización que se pueden usar para display:table , display:table-cell , display:inline , etc. Se pueden usar con las utilidades de alineación vertical para alinear elementos de celda en línea, bloque en línea o tabla.

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

BS4 - Centro vertical usando utilidades de visualización Demo

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

Bootstrap 3

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

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

Transformar el método de traslació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.

Answer 22

Elaboré un poco la respuesta de zessx para facilitar su uso cuando se mezclan diferentes tamaños de columnas 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 puedes usarlo en tus columnas de respuesta 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>

Answer 23

    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>