it-swarm-es.com

¿Cómo alinear verticalmente los elementos en un div?

Tengo un div con dos imágenes y un h1. Todos ellos deben estar alineados verticalmente dentro de la div, uno al lado del otro.

Una de las imágenes debe ser absolute posicionada dentro de la div.

¿Qué es el CSS necesario para que esto funcione en todos los navegadores comunes?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>
646
Abdu

Wow, este problema es popular. Se basa en un malentendido en la propiedad vertical-align. Este excelente artículo lo explica:

Entendiendo vertical-align, o "Cómo (no) Centrar verticalmente el contenido" por Gavin Kistner.

“Cómo centrar en CSS”es una excelente herramienta web que ayuda a encontrar los atributos de centrado de CSS necesarios para diferentes situaciones.


En una palabra (y para evitar la rotura del enlace):

  • Elementos en línea (y solo elementos en línea) pueden alinearse verticalmente en su contexto a través de vertical-align: middle. Sin embargo, el "contexto" no es la altura del contenedor principal, es la altura de la línea de texto en la que se encuentran. jsfiddle example
  • Para los elementos de bloque, la alineación vertical es más difícil y depende en gran medida de la situación específica:
    • Si el elemento interno puede tener un altura fija , puede establecer su posición absolute y especificar su height, margin-top y top. Ejemplo de jsfiddle
    • Si el elemento centrado consta de una sola línea y su altura principal es fija simplemente puede configurar line-height del contenedor para que llene su altura. Este método es bastante versátil en mi experiencia. Ejemplo de jsfiddle
    • ... hay más casos especiales de este tipo.
816
Konrad Rudolph

Ahora que el soporte de flexbox está aumentando, este CSS aplicado al elemento contenedor centraría verticalmente el elemento contenido:

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

Use la versión con prefijo si también necesita apuntar a Explorer 10 y los navegadores de Android antiguos (<4.4):

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}
109
E. Serrano

Utilicé este código muy simple:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

Obviamente, si usas un .class o un #id, el resultado no cambiará.

104
user2346571

Funcionó para mí:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}
44
Romain
 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

Una técnica de un amigo mío:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

DEMO aquí

21
abernier

Para colocar los elementos del bloque en el centro (funciona en IE9 y superior), se necesita un contenedor div

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
16
Blacksonic

Todos ellos deben estar alineados verticalmente dentro del div

Alineado ¿Cómo ? ¿Tapas de las imágenes alineadas con la parte superior del texto?

Una de las imágenes debe estar posicionada de forma absoluta dentro de la div.

¿Absolutamente posicionado en relación con el DIV? Tal vez podrías esbozar lo que estás buscando ...?

fd ha descrito los pasos para el posicionamiento absoluto, así como el ajuste de la visualización del elemento H1 tal que las imágenes aparecerán en línea con él. A eso, agregaré que puede alinear las imágenes usando el estilo vertical-align:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... esto pondría el encabezado y las imágenes juntas, con los bordes superiores alineados. Existen otras opciones de alineación; ver la documentación . También puede resultar beneficioso dejar caer el DIV y mover las imágenes dentro del elemento H1; esto proporciona un valor semántico al contenedor y elimina la necesidad de ajustar la visualización del H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>
16
Shog9

Usa esta fórmula, y funcionará siempre sin grietas:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For Explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For Explorer only */
/* Optional: #inner[id] {position: static;} */
<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>
15
Anita Mandal

Mi truco es colocar dentro de la tabla div una tabla con 1 fila y 1 columna, establecer el 100% del ancho y la altura y la propiedad vertical-align: middle.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Fiddle: http://jsfiddle.net/joan16v/sbqjnn9q/

11
joan16v

Casi todos los métodos necesitan especificar la altura, pero a menudo no tenemos alturas.
Así que aquí hay un truco de 3 líneas de CSS3 que no requiere conocer la altura.

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

Es compatible incluso en IE9.

con sus prefijos de vendedor:

.element {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Fuente: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

10
Shadowbob

Podemos utilizar un cálculo de función CSS para calcular el tamaño del elemento y luego colocar el elemento secundario en consecuencia.

Ejemplo HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

Y CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Demostración creada aquí: https://jsfiddle.net/xnjq1t22/

Esta solución funciona bien con la respuesta divheight y width también.

Nota: La función de cálculo no está probada para compatibilidad con navegadores antiguos.

3
Dashrath

Por defecto, h1 es un elemento de bloque y se representará en la línea después del primer img, y hará que el segundo img aparezca en la línea que sigue al bloque.

Para evitar que esto ocurra, puede configurar el h1 para que tenga un comportamiento de flujo en línea:

#header > h1 { display: inline; }

En cuanto a posicionar absolutamente el img dentro del div , debe configurar el div que contiene para que tenga un "tamaño conocido" antes de que esto funcione correctamente. En mi experiencia, también necesita cambiar el atributo de posición fuera de la posición predeterminada: position: relative funciona para mí:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Si puede hacer que eso funcione, puede intentar eliminar progresivamente los atributos de altura, ancho y posición del encabezado div para obtener los atributos mínimos necesarios para obtener el efecto que desea.

ACTUALIZACIÓN:

Aquí hay un ejemplo completo que funciona en Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>
3
Mike Tunnicliffe

Al utilizar CSS para centrar verticalmente, puede dejar que los contenedores externos actúen como una tabla y el contenido como una celda de tabla. En este formato tus objetos se mantendrán centrados. :)

Anidé varios objetos en JSFiddle para un ejemplo, pero la idea central es así:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

El ejemplo de múltiples objetos:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Resultado

 Result

https://jsfiddle.net/martjemeyer/ybs032uc/1/

3
Henk-Martijn

Al día de hoy, he encontrado una nueva solución para alinear verticalmente varias líneas de texto en una división usando CSS3 (y también estoy usando el sistema de cuadrícula bootstrap v3 para embellecer la interfaz de usuario), que es la siguiente:

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

Según mi entendimiento, el padre inmediato del texto que contiene el elemento debe tener cierta altura. Espero que te ayude también. ¡Gracias!

2
Shivam

¡Solo usa una tabla de una celda dentro del div! Solo configure la altura de la celda y la tabla y con el 100% y podrá usar la alineación vertical.

Una tabla de una celda dentro del div maneja la alineación vertical y es compatible con versiones anteriores a la Edad de Piedra.

1
Joel Moses

Para mí, funcionó de esta manera:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

El elemento "a" se convirtió en un botón, usando clases de Bootstrap, y ahora está centrado verticalmente dentro de un "div" externo.

0
BernieSF

Esta es mi solución personal para un elemento i dentro de un div

Ejemplo de JSFiddle

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}
0
danigonlinea

Hay dos formas de alinear los elementos vertical y horizontalmente.

1. Bootstrap 4.3.X

para la alineación vertical: d-flex align-items-center

para la alineación horizontal: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. CSS3

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}
<div class="container">
  <div class="child">I am in Center</div>
</div>
0
WasiF

He estado usando la siguiente solución (sin posicionamiento ni altura de línea) desde hace más de un año, también funciona con IE 7 y 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>
0
Arsh