vertical-alinear con Bootstrap 3
Estoy usando Twitter Bootstrap 3, y tengo problemas cuando quiero alinear verticalmente dos div
, por ejemplo - JSFiddle link:
<!-- 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-align
no funciona. Intenté usar margin-top
para arreglarlo, pero creo que esta no es una buena solución para el diseño responsivo.
23 answers
Esta respuesta presenta un hack, pero te recomiendo encarecidamente que uses flexbox (como se indica en @Haschem answer), ya que ahora es compatible en todas partes.
Enlace de demos:
- Bootstrap 3
- Bootstrap 4 alfa 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>
Usando inline-block
añade 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 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 tabs/8 espacios). Y así...
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 aparentemente comentarios inútiles <!-- ... -->
? Son importantes without 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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-25 23:29:05
Diseño flexible de la caja
Con la llegada del CSS Flexible Box , 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. Tal vez no mañana, pero pronto, y por el resto de nuestras vidas."
- CSS Legendary Eric Meyer at W3Conf 2013
Flexible Box (o en breve, Flexbox), es un nuevo sistema de diseño que está diseñado específicamente para propósitos de diseño. La especificación establece :
Flex layout es superficialmente similar a block layout. Carece de muchos de las propiedades centradas en el texto o el documento más complejas que se pueden utilizar en el diseño de bloques, como flotadores y columnas. A cambio gana simple y potentes herramientas para distribuir el espacio y alinear el contenido de diferentes maneras que las aplicaciones web y las páginas web complejas a menudo necesitan.
¿Cómo puede ayudar en este caso? Bueno, veamos.
Columnas alineadas verticalmente
Usando Twitter Bootstrap tenemos .row
s que tienen algunos .col-*
s. Todo lo que necesitamos hacer es mostrar el deseado .row
2 como un flex container box y luego alinear todos sus flex items (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
El área coloreada muestra la caja de relleno de las columnas.
Aclaración sobre align-items: center
8.3 Alineación de ejes transversales: la propiedad
align-items
Los elementos Flex se pueden alinear en el eje transversal de la línea actual del contenedor flex, similar a
justify-content
pero en la dirección perpendicular.align-items
establece el valor predeterminado alineación de todos los elementos del contenedor flex, incluidos los elementos anónimos flex.
align-items: center;
Por valor central, el recuadro 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 columnas en dispositivos extra pequeños a menos que le des una de las clases .col-xs-#
a las columnas.
Por lo tanto, en esta demostración en particular, I ha utilizado .col-xs-*
clases 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 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ía especificar .vertical-align
solo en tamaños de pantalla específicos así:
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
En ese caso, yo iría con @ KevinNelson ' s aproximación.
Nota importante # 2: Prefijos de proveedor omitidos debido a la brevedad. La sintaxis de Flexbox se ha cambiado durante el tiempo. La nueva sintaxis escrita no funcionará en versiones anteriores de los navegadores web (pero no tan antiguos 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 hace clic en "Alternar Compilado Ver " en la Demo , verás la versión prefijada de las declaraciones CSS (gracias a Autoprefixer).
Columnas de altura completa con contenido alineado vertical
Como puede ver en la demostración anterior , las columnas (los elementos flex) ya no son tan altas como su contenedor (el cuadro contenedor flex). es decir, el elemento .row
).
Esto se debe a usar el valor center
para la propiedad align-items
. El valor predeterminado es stretch
para que los elementos puedan rellene toda la altura del elemento padre.
Para arreglar eso, también puedes agregar display: flex;
a las columnas:
EJEMPLO AQUÍ (Una vez más, 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
El área coloreada muestra la caja de relleno de las columnas.
Por último, pero no menos importante, tenga en cuenta que las demos y los fragmentos de código aquí están destinados a darle una idea diferente, para proporcionar un enfoque moderno a 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, incluyendo el soporte del navegador, estos recursos serían útiles:
- Red de Desarrolladores de Mozilla-Cajas flexibles
- Guía para Flexbox-Trucos CSS
- HTML5Rocks-Flexbox quick
- SmashingMagazine - Elementos de centrado con Flexbox
- Philip Walton-Resuelto por Flexbox
- Puedo Usar: Módulo de Diseño de Caja Flexible
1. Alinear verticalmente una imagen dentro de un div con altura de respuesta2. Es mejor usar una clase adicional para no alterar el valor predeterminado de Twitter Bootstrap .row
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:33:24
El siguiente código funcionó para mí:
.vertical-align {
display: flex;
align-items: center;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-20 19:39:42
Prueba esto en el CSS del div:
display: table-cell;
vertical-align: middle;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-14 16:24:36
Después de la respuesta aceptada, si no desea personalizar el marcado, para la separación de preocupaciones o simplemente porque utiliza 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-20 19:03:59
Pensé en compartir mi "solución" en caso de que ayude a alguien más que no esté familiarizado con las consultas @media.
Gracias a la respuesta de @HashemQolami, construí algunas consultas de medios que funcionarían para dispositivos móviles como las clases col-* para poder apilar las col -* para dispositivos 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;
}
}
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ía un finagling más avanzado, pero para una página simple con-xs apilados y-sm y más grandes en filas, esto funciona bien.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-05 00:05:31
Prefiero este método según David Walsh Vertical center CSS :
.children{
position: relative;
top: 50%;
transform: translateY(-50%);
}
El transform
no es esencial; simplemente encuentra el centro con un poco más de precisión. Internet Explorer 8 puede ser un poco menos centrado como resultado, pero todavía no está mal - Puedo usar - Transforms 2d.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-19 18:19:38
Actualización 2018
Sé que la pregunta original era para Bootstrap 3, pero ahora que Bootstrap 4 ha sido lanzado, aquí hay una guía actualizada sobre el centro vertical.
Importante! El centro vertical es relativo a la altura del padre
Si el padre del elemento que intenta centrar no tiene definido altura, none of the vertical centering solutions will ¡Trabaja!
Bootstrap 4
Ahora que BS4 es flexbox por defecto hay muchos enfoques diferentes para la alineación vertical de usar: auto-márgenes, flexbox utils, o mostrar utils junto con vertical align utils. Al principio "vertical align utils" parece obvio, pero estos solo funcionan con elementos de visualización en línea y de tabla. Aquí hay algunos Bootstrap 4 centrado vertical opcion..
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
completa la altura de la fila, y my-auto
centrará verticalmente la columna 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 usando márgenes automáticos 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:
Dado que Bootstrap 4 .row
es ahora display:flex
, simplemente puede usar align-self-center
en cualquier columna para centrarla 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 todo .row
para alinear verticalmente 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>
BS4-Centro vertical diferentes columnas de altura Demo
3 - Centro Vertical Con Pantalla Utils:
Bootstrap 4 tiene pantalla utils que se puede utilizar para display:table
, display:table-cell
, display:inline
, etc.. Estos se pueden usar con vertical alignment utils para alinear elementos inline, inline-block o table cell.
<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 display utils Demo
Véase también: Centro de alineación vertical en Bootstrap 4
Bootstrap 3
Método Flexbox en el contenedor de la item(s) to center:
.display-flex-center {
display:flex;
align-items:center;
}
Transform translateY method:
.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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-15 11:33:27
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
----------------------------------
| |
| -------------------------- |
| | | |
| | | |
| | | |
| | | |
| | | |
| -------------------------- |
| |
----------------------------------
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-31 23:13:24
Realmente encuentro que el siguiente código funciona usando Chrome y no 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 tenga que modificar las alturas (específicamente en .v-center
) y eliminar/cambiar div en div[class*='col-']
para sus necesidades.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-14 16:25:13
Esta es mi solución. Simplemente 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-02 12:10:54
Me encontré con este mismo problema. En mi caso no sabía la altura del contenedor exterior, pero así es como lo arreglé:
Primero establezca la altura para sus elementos html
y body
para que sean 100%. Esto es importante! Sin esto, los elementos html
y body
simplemente heredarán la altura de sus hijos.
html, body {
height: 100%;
}
Entonces 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 as:
<body>
<div class="container">
<div class="inner-container">
<p>Vertically Aligned</p>
</div>
</div>
</body>
Esto es todo lo que necesita para alinear verticalmente el contenido. Échale un vistazo en fiddle:
Jsfiddle
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-20 19:02:09
Si está utilizando la versión Less de Bootstrap, y compila en CSS usted mismo, puede usar algunas clases de utilidad para usar con clases de Bootstrap.
He encontrado que estos funcionan fantásticamente bien donde quiero preservar la capacidad de respuesta y la configurabilidad del sistema de cuadrícula de arranque (como usar -md
o -sm
), pero quiero que todas las columnas en una fila dada tengan la misma altura vertical (para que pueda alinear verticalmente su contenido y tener todas las columnas en la fila compartir un centro común).
CSS / Less:
.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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-20 19:08:16
Elaboré un poco la respuesta de zessx, para que sea más fácil de usar cuando se mezclan 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);
Que genera el siguiente CSS (que puede usar directamente en sus hojas de estilo, si no está utilizando 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 responsivas de esta manera:
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:55:19
No hay necesidad de tabla 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-02 07:21:05
OK, accidentalmente he mezclado algunas soluciones, y finalmente funciona ahora para mi diseño donde traté de hacer una tabla 3x3 con columnas de arranque 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-26 20:20:37
Los comportamientos Flex son soportados de forma nativa desde Bootstrap 4. Añadir d-flex align-items-center
en el div row
. 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 tu 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-16 21:06:16
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-16 08:06:50
Hay varias maneras de hacerlo
1.
display: table-cell;
vertical-align: middle;
Y el css del contenedor a
display:table;
-
Utilice relleno junto con media-screen para cambiar el relleno en relación con el tamaño de la pantalla. Pantalla de Google @ media para saber más
-
Usar relleno relativo es decir, especificar el relleno en términos de %
Espero que ayude
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-25 05:40:39
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-09 12:25:32
Con Bootstrap 4 (que actualmente está en alpha) puede usar la clase .align-items-center
. Así que puede mantener el carácter sensible de Bootstrap.
A mí me parece bien trabajar de inmediato. Ver Documentación de Bootstrap 4.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-20 14:46:05
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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-25 08:41:21
Me encontré con la misma situación en la que quería alinear algunos elementos div verticalmente en una fila y encontré que las clases de Bootstrap col-xx-xx aplican estilo al div como float: left.
Tuve que aplicar el estilo a los elementos div como style="Float:none" y todos mis elementos div comenzaron 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 float:
W3Schools - Float
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-14 16:26:40