Pregunta alineación vertical con Bootstrap 3


Estoy usando Twitter Bootstrap 3, y tengo problemas cuando quiero alinearme 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: leftno display:inline-block, entonces la propiedad vertical-align no funciona Intenté usar margin-top para arreglarlo, pero creo que esta no es una buena solución para el diseño receptivo.


753
2017-12-12 15:43


origen


Respuestas:


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

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

Aún 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

Utilizando inline-block agrega espacio extra entre bloques si deja un espacio real en su código (como ...</div> </div>...) Este espacio extra rompe nuestra grilla si los tamaños de 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 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...

Enter image description here

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>

Enter image description here

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

Nota: el Bootply ha sido actualizado


836
2017-12-12 16:17



Diseño de caja flexible

Con el advenimiento de la Caja flexible CSS, muchas de las pesadillas de los diseñadores web1 han sido resueltos 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,   pero pronto, y por el resto de nuestras vidas ".

- CSS legendario Eric Meyer a 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. los estados de especificación:

El diseño de Flex es superficialmente similar al diseño de bloques. Carece de muchos de   las propiedades más complejas centradas en texto o documento que se pueden usar   en el diseño del bloque, como flotadores y columnas. A cambio gana simple   y poderosas herramientas para distribuir el espacio y alinear el contenido de maneras   que las webapps y 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 algo .col-*s. Todo lo que tenemos que hacer es mostrar el deseado .row2 como un contenedor flexible cuadro y luego alinear todo su elemento flexibles (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 de color muestra el cuadro de relleno de columnas.

Aclarando sobre align-items: center

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

Artículos flexibles se puede alinear en el eje transversal de la línea actual del contenedor flexible, similar a justify-contentpero en la dirección perpendicular. align-items establece la alineación predeterminada para todos los elementos del contenedor flexible, incluido el anónimo flex artículos.

align-items: center;   Por valor de centro, el elemento flexibleEl recuadro de márgenes se centra en eje transversal dentro de la linea


Big Alert

Nota importante n. ° 1: Twitter Bootstrap no especifica el width de columnas en dispositivos extra pequeños a menos que le dé uno de .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 el modo móvil, porque especifica el width de la columna explícitamente.

Pero alternativamente podrías apagar el diseño de Flexbox simplemente cambiando display: flex; a 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 podrías especificar .vertical-align  solamente en tamaños de pantalla específicos al igual que:

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

En ese caso, iría con @KevinNelsones enfoque.

Nota importante # 2: Los prefijos del proveedor se han omitido debido a la brevedad. La sintaxis de Flexbox ha cambiado durante el tiempo. La nueva sintaxis escrita no funcionará en las versiones anteriores de los navegadores web (¡pero no tan antiguas 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 y así sucesivamente en modo de producción.

Si haces clic en "Conmutar vista compilada" en el Manifestación, verás la versión prefijada de las declaraciones de CSS (gracias a Autoprefixer)


Columnas de altura completa con contenidos verticales alineados

Como ves en el demostración previa, las columnas (elementos flexibles) ya no son tan altas como su contenedor (la caja del contenedor flexible, es decir, .row elemento).

Esto se debe al uso de center valor por align-items propiedad. 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, fíjate en 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 de color muestra el cuadro de relleno de columnas.

Por último, si bien no menos importante, observe 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. Por favor, importa "Big Alert"sección si va a utilizar este enfoque en sitios web o aplicaciones del mundo real.


Para obtener más información, incluido el soporte del navegador, estos recursos serían útiles:


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 predeterminado de Twitter Bootstrap .row.


803
2017-08-27 00:09



El siguiente código funcionó para mí:

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

27
2017-10-01 15:01



Pruebe esto en el CSS de la div:

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

23
2017-12-12 16:20



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


20
2018-01-27 09:11



Pensé que compartiría mi "solución" en caso de que ayude a otras personas que no estén familiarizadas 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 de colores para poder apilar el col- * para dispositivos móviles pero mostrarlos alineados verticalmente en el centro para pantallas más grandes, p.

<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 truco más avanzado, pero para una página simple con -xs apilado y -sm y más grande en filas, esto funciona bien.


19
2018-01-05 00:05



Prefiero este método según David Walsh Centro Vertical CSS:

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

los transform no es esencial; simplemente encuentra el centro un poco más preciso. Internet Explorer 8 puede estar un poco menos centrado como resultado, pero todavía no está mal, Puedo usar - Transforma 2d.


16
2018-02-14 19:21



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 como

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

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

13
2018-05-31 23:13



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 al altura del padre

Si el padre del elemento que intentas centrar no tiene definido    altura, ninguna de las soluciones de centrado verticales funcionará!

Bootstrap 4

Ahora que BS4 es Flexbox por defecto Hay muchos enfoques diferentes para la alineación vertical usando: márgenes automáticos, Flexbox utils, o el mostrar utils junto con vertical alinear utils. Al principio, "vertical alinear utils" parece obvio, pero estos solamente trabajar con elementos de visualización en línea y 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-100 hace que la fila tenga una altura completa, y my-auto se centrará verticalmente el col-sm-12 columna.

<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 usando márgenes automáticos Manifestación

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

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

2 - Centro vertical con Flexbox:

vertical center grid columns

Desde Bootstrap 4 .row es ahora display:flex puedes simplemente 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 usar align-items-center en la totalidad .row para alinear verticalmente el centro todos 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 - Centro vertical columnas de altura diferentes Manifestación


3 - Centro vertical usando los Utilizadores de pantalla:

Bootstrap 4 tiene mostrar utils que puede usarse para display:table, display:table-cell, display:inline, etc. Se pueden usar con el utiles de alineación vertical para alinear elementos en línea, bloque en línea o celda de 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 utilizando utilidades de pantalla Manifestación

Ver también: Vertical Alinee el centro en Bootstrap 4


Bootstrap 3

Método Flexbox en el contenedor del artículo (s) al centro:

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

Método Transform translateY:

.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


12
2018-03-21 12:14



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

Bootply Link

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


9
2017-07-12 19:57



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

Primero establece la altura para tu html y body elementos para que sean 100%. ¡Esto es importante! Sin esto, el html y body los elementos simplemente heredarán 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 finalmente 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


7
2017-12-28 12:08