760 votos

la alineación vertical de los elementos de un div

Tengo un div con dos imágenes y un h1. Todos de ellos necesitan estar alineados verticalmente dentro del div, uno al lado del otro. Una de las imágenes debe ser absoluta posicionado 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>

906voto

Konrad Rudolph Puntos 231505

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

Entendimiento vertical-align, o "Cómo (No) Verticalmente el Contenido del Centro" por Gavin Kistner.


En pocas palabras (y para evitar enlace rot):

  • Los elementos en línea (y sólo los elementos en línea) puede ser alineado verticalmente en su contexto a través de vertical-align: middle. Sin embargo, el "contexto" no es todo el contenedor primario de altura, es la altura de la línea de texto que se encuentra. jsfiddle ejemplo
  • Para los elementos de bloque, la alineación vertical es más difícil y depende fuertemente de la situación específica:
    • Si el elemento interior puede tener una altura fija, usted puede hacer que su posición absolute y especificar su height, margin-top y top posición. jsfiddle ejemplo
    • Si el centrado en el elemento consta de una sola línea y su padre la altura es fija , usted puede simplemente poner el recipiente del line-height a llenar su altura. Este método es muy versátil en mi experiencia. jsfiddle ejemplo
    • ... hay que ser más de esos casos especiales.

47voto

Romain Puntos 587

A mí me funcionó :

.vcontainer {
   min-height: 10em;
   display: table-cell;
   vertical-align: middle;
}

22voto

abernier Puntos 4115

Una técnica de un amigo mío:

código 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í

16voto

Shog9 Puntos 82052

Todos de ellos necesitan estar alineados verticalmente dentro de la div

Alineado cómo? Tops de las imágenes alineada con la parte superior del texto?

Una de las imágenes debe ser absoluta posicionado dentro de la div.

Absolutamente sitúa en relación con el DIV? Tal vez usted podría esbozar lo que usted está buscando...?

fd ha descrito los pasos para el posicionamiento absoluto, así como el ajuste de la pantalla de la H1 elemento tal que las imágenes aparecerán en línea con ella. Para eso, voy a añadir que pueda alinear las imágenes mediante el uso de la vertical-align estilo:

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

...esto pondría a la cabecera y de imágenes, con los bordes superiores alineados. Otras opciones de alineación existen; véase la documentación. Usted también podría resultar beneficioso para soltar el DIV y mover las imágenes dentro de la H1 elemento - esto proporciona valor semántico en el contenedor, y elimina la necesidad de ajustar la visualización de la H1:

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

15voto

Anita Mandal Puntos 136

El uso de esta fórmula y se trabaja siempre sin grietas

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

<style type="text/css">
#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;} */
</style>

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X