¿Cómo alinear verticalmente elementos en un div?

Ya no necesitas investigar más por todo internet ya que llegaste al lugar adecuado, contamos con la solución que deseas pero sin problema.

Solución:

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” de Gavin Kistner.

“Cómo centrar en CSS” es una gran herramienta web que ayuda a encontrar el centrado CSS necesario attributes para diferentes situaciones.

---

En una palabra _{^{(y para evitar la rotura de enlaces)}}:

• elementos en línea (y solamente elementos en línea) se pueden alinear verticalmente en su contexto a través de vertical-align: middle. Sin embargo, el “contexto” no es la altura total del contenedor principal, es la altura de la línea de texto en la que se encuentran. Ejemplo de jsfiddle
• 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 interior puede tener un altura fijapuedes hacer su posición absolute y especificar su height, margin-top y top posición. ejemplo jsfiddle
  • Si el elemento centrado consta de una sola líneaysu altura principal es 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 casos especiales de este tipo.

Ahora que la compatibilidad con 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 Explorer 10 y navegadores 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;

Usé este código muy simple:

HTML:

    

        
Some txt
        
bla bla bla
    

CSS:

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

Obviamente, ya sea que use un .class o un #idel resultado no cambiará.

Te mostramos las reseñas y valoraciones de los usuarios

Agradecemos que quieras sostener nuestra investigación dejando un comentario y dejando una puntuación te lo agradecemos.

---

---

Utiliza Nuestro Buscador