Pregunta Alineación vertical de elementos en un div


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

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

¿Cuál 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>

561
2017-09-17 02:53


origen


Respuestas:


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

Comprensión vertical-aligno "Cómo (no) centrar verticalmente el contenido" por Gavin Kistner.

"Cómo centrarse en CSS" es una gran herramienta web que ayuda a encontrar los atributos de centrado CSS necesarios para diferentes situaciones.


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

  • Elementos en línea (y solamente 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. Ejemplo jsfiddle
  • Para elementos de bloque, la alineación vertical es más difícil y depende mucho de la situación específica:
    • Si el elemento interno puede tener una altura fija, puedes hacer su posición absolute y especifique su height, margin-top y top posición. Ejemplo jsfiddle
    • Si el elemento centrado consiste en una sola línea  y  la altura de sus padres está fija simplemente puede configurar el contenedor line-height para llenar su altura Este método es bastante versátil en mi experiencia. Ejemplo jsfiddle
    • ... hay más tales casos especiales.

738
2017-09-17 15:38



Usé 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, ya sea que uses un .class o un #id, el resultado no cambiará


90
2018-05-03 11:11



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

Utilice la versión prefijada si también necesita orientar navegadores Android Explorer 10 y 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;
}

75
2018-06-26 16:56



Funcionó para mí:

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

43
2018-05-11 10:24



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

MANIFESTACIÓN aquí


20
2018-04-16 20:19



Todos ellos deben estar alineados verticalmente dentro del div

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

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

¿Absolutamente posicionado en relación con el DIV? ¿Quizás 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 de la H1 elemento tal que las imágenes aparecerán en línea con él. A eso, agregaré que puede alinear las imágenes mediante el uso del vertical-align estilo:

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

... esto juntaría el encabezado y las imágenes, con los bordes superiores alineados. Existen otras opciones de alineación; ver la documentación. También puede resultar beneficioso soltar el DIV y mover las imágenes dentro del H1 elemento: 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
2017-09-17 04:34



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>


14
2018-04-01 18:58



Para colocar elementos de bloque en el centro (funciona en IE9 y superior), necesita un contenedor div:

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

13
2017-10-14 09:07



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

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

Es compatible incluso en IE9.

con sus prefijos de proveedor:

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


9
2018-01-18 10:13



Mi truco es poner dentro de la div una tabla con 1 fila y 1 columna, establecer 100% de ancho y alto, y la propiedad vertical-alinear: medio.

<div>

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

</div>

Violín: http://jsfiddle.net/joan16v/sbqjnn9q/


9
2017-10-14 15:26



Por defecto, h1 es un elemento de bloque y aparecerá en la línea después de la primera img, y hará que la segunda img aparezca en la línea que sigue al bloque.

Para evitar que esto ocurra, puede configurar 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 funcione correctamente. En mi experiencia, también necesita cambiar el atributo de posición lejos de la posición predeterminada: trabajo relativo para mí:

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

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

ACTUALIZAR:

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
2017-09-17 03:08