¿Cómo alinear verticalmente una imagen dentro de un div?

Pregunta

¿Cómo se puede alinear una imagen dentro de un div contiene?

Ejemplo

En mi ejemplo, necesito centrar verticalmente el en el

con class ="frame “:

 

La altura de .frame es fija y la altura de la imagen es desconocida. Puedo agregar nuevos elementos en .frame si esa es la única solución. Estoy intentando hacer esto en IE≥7, Webkit, Gecko.

Vea el jsfiddle aquí

 .frame { height: 25px; /* equals max image height */ line-height: 25px; width: 160px; border: 1px solid red; text-align: center; margin: 1em 0; } img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px; } 
 

La única (y la mejor herramienta de navegación cruzada) que conozco es usar un ayudante de inline-block con height: 100% y vertical-align: middle en ambos elementos.

Entonces hay una solución: http://jsfiddle.net/kizu/4RPFa/4570/

 .frame { height: 25px; /* equals max image height */ width: 160px; border: 1px solid red; white-space: nowrap; /* this is required unless you put the helper span closely near the img */ text-align: center; margin: 1em 0; } .helper { display: inline-block; height: 100%; vertical-align: middle; } img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px; } 
 

Esto podría ser útil:

 div { position:relative; width:200px; height:200px; } img { position:absolute; top:0; bottom:0; margin:auto; } .image { min-height:50px } 

Referencia: http://www.student.oulu.fi/~laurirai/www/css/middle/

La solución de matejkramny es un buen comienzo, pero las imágenes sobredimensionadas tienen una proporción incorrecta.
Aquí está mi tenedor:

demo: https://jsbin.com/lidebapomi/edit?html,css,output

avance


HTML:

 

CSS:

 .frame { height: 160px; /*can be anything*/ width: 160px; /*can be anything*/ position: relative; } img { max-height: 100%; max-width: 100%; width: auto; height: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } 

Solución de 3 líneas:

 position: relative; top: 50%; transform: translateY(-50%); 

Esto se aplica a todo.

Desde aquí .

Una solución PURE CSS:

http://jsfiddle.net/3MVPM/

El CSS:

 .frame { margin: 1em 0; height: 35px; width: 160px; border: 1px solid red; position: relative; } img { max-height: 25px; max-width: 160px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background: #3A6F9A; } 

Cosas clave

 // position: relative; - in .frame holds the absolute element within the frame // top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component // margin: auto; - centers the image horizontally & vertically 

De esta forma puedes centrar una imagen verticalmente ( demo ):

 div{ height:150px; //IE7fix line-height: 150px; } img{ vertical-align: middle; margin-bottom:0.25em; } 

Para aquellos que llegaron a este post y están interesados ​​en una solución más moderna, y que no tienen necesidad de soportar navegadores heredados, puede hacer esto:

 .frame { display: flex; /*Uncomment below to center horizontally*/ /*justify-content: center;*/ align-items: center; } img { height: auto; } /* Styling stuff not needed for demo */ .frame { max-width: 900px; height: 200px; margin: auto; background: #222; } p { max-width: 900px; margin: 20px auto 0; } img { width: 150px; } 
 

Podría intentar configurar el CSS de PI para display: table-cell; vertical-align: middle; display: table-cell; vertical-align: middle;

¡Hay una solución súper fácil con flexbox!

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

Solución de la imagen de fondo .frame el elemento de la imagen todos juntos y lo .frame como fondo del div con una clase de .frame

http://jsfiddle.net/URVKa/2/

esto al menos funciona bien en IE8, FF6 y Chrome13

Lo comprobé, esta solución no funcionará para reducir las imágenes de una altura mayor a 25px. Hay una propiedad llamada background-size que establece el tamaño del elemento, pero es CSS3 que entraría en conflicto con el requisito IE7.

Te aconsejaría que vuelvas a configurar las prioridades de tu navegador y diseñas los mejores navegadores disponibles, o que obtengas un código de servidor para cambiar el tamaño de las imágenes si quieres usar esta solución

Podrías hacer esto:

manifestación

http://jsfiddle.net/DZ8vW/1

CSS

 .frame { height: 25px; /* equals max image height */ line-height: 25px; width: 160px; border: 1px solid red; text-align: center; margin: 1em 0; position: relative; /* Changes here... */ } img { background: #3A6F9A; max-height: 25px; max-width: 160px; top: 50%; /* here.. */ left: 50%; /* here... */ position: absolute; /* and here */ } 

javascript

 $("img").each(function(){ this.style.marginTop = $(this).height() / -2 + "px"; }) 

Puedes probar el código a continuación

 .frame{ display:flex; justify-content: center; align-items: center; width:100%; } 
 

http://jsfiddle.net/MBs64/

 .frame { height: 35px; /* equals max image height */ width: 160px; border: 1px solid red; text-align: center; margin: 1em 0; display: table-cell; vertical-align: middle; } img { background: #3A6F9A; display: block; max-height: 35px; max-width: 160px; } 

La propiedad clave es display: table-cell; para .frame. Div.frame se muestra como en línea con esto, por lo que debe envolverlo en un elemento de bloque.

Esto funciona en FF, Opera, Chrome, Safari e IE8 +.

ACTUALIZAR

Para IE7 necesitamos agregar una expresión css:

 *:first-child+html img { position: relative; top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px"); } 

No estoy seguro acerca de IE, pero en Firefox y Chrome, si tiene un img en un contenedor div , el siguiente CSS debería funcionar. Al menos para mí funciona bien:

 div.img-container { display:table-cell; vertical-align: middle; height: 450px; width: 490px; } div.img-container img { max-height: 450px; max-width: 490px; } 

Pruebe esta solución con pure css http://jsfiddle.net/sandeep/4RPFa/72/ Puede ser el problema principal con su html. Usted no utiliza presupuesto cuando define la image height y la image height en su html.

CSS:

 .frame { height: 25px; /* equals max image height */ width: 160px; border: 1px solid red; position:relative; margin: 1em 0; top: 50%; text-align: center; line-height: 24px; margin-bottom:20px; } img { background: #3A6F9A; vertical-align: middle; line-height:0; margin:0 auto; max-height:25px; } 

EDITAR:

Cuando trabajo con la etiqueta img , deja un espacio de 3px to 2px desde la top . Ahora disminuyo line-height y es el trabajo. css:

  .frame { height: 25px; /* equals max image height */ width: 160px; border: 1px solid red; margin: 1em 0; text-align: center; line-height:22px; *:first-child+html line-height:24px; /* for IE7 */ } img { background: #3A6F9A; vertical-align: middle; line-height:0; max-height:25px; max-width:160px; } @media screen and (-webkit-min-device-pixel-ratio:0) { .frame { line-height:20px; /* webkit browsers */ } 

la propiedad de line-height se render diferente en diferentes navegadores. Asi que; tenemos que definir diferentes navegadores de propiedades de line-height

Mira este ejemplo http://jsfiddle.net/sandeep/4be8t/11/

Consulte este ejemplo sobre line-height diferente en diferentes navegadores ingrese las diferencias de altura en Firefox y Chrome

Mi solución: http://jsfiddle.net/XNAj6/2/

 
.container { display: table; float: left; border: solid black 1px; margin: 2px; padding: 0; background-color: black; width: 150px; height: 150px; } .frame { display: table-cell; text-align: center; vertical-align: middle; border-width: 0; } .img { max-width: 150px; max-height: 150px; vertical-align: middle; }

Esto funciona para los navegadores modernos (2016 en el momento de la edición) como se muestra en esta demostración en el codepen

 .frame { height: 25px; line-height: 25px; width: 160px; border: 1px solid #83A7D3; } .frame img { background: #3A6F9A; display:inline-block; vertical-align: middle; } 

Es muy importante que le des una clase a las imágenes o usas la herencia para enfocar las imágenes que necesitas centradas. En este ejemplo, utilizamos .frame img {} para que solo las imágenes envueltas por un div con una clase de .frame sean segmentadas.

Manera fácil que funciona para mí:

 img { vertical-align: middle; display: inline-block; position: relative; } 

Funciona muy bien para Google Chrome. Prueba esto en un navegador diferente.

SOLUCIÓN CON LA CÁMARA DE MESA Y MESA

A veces se debe resolver mostrando como tabla / tabla-celda. Por ejemplo, una pantalla de título rápido. Es una forma recomendada por W3 también. Te recomiendo que consultes este enlace llamado Centrando cosas desde W3C.org

Los consejos utilizados aquí son:

  • Contenedor de posicionamiento absoluto mostrado como tabla
  • Vertical alineado con el contenido central que se muestra como celda de tabla
 .container { position:absolute; display:table; width:100%; height:100%; } .content { display:table-cell; vertical-align:middle; } 
 

PEACE IN THE WORLD

Si puede vivir con márgenes de tamaño de píxel, solo agregue font-size: 1px; al .frame . Pero recuerde que ahora en el .frame 1em = 1px, lo que significa que también necesita establecer el margen en píxeles.

http://jsfiddle.net/feeela/4RPFa/96/

EDITAR: ahora ya no está centrado en Opera …

Para centrar una imagen dentro de un contenedor (podría ser un logotipo) además de un texto como este:

enter image description here

Básicamente envuelves la imagen

 .outer-frame { border: 1px solid red; min-height: 200px; text-align: center; //only for align horizontally } .wrapper{ line-height: 200px; border: 2px dashed blue; border-radius: 20px; margin: 50px } img { //height: auto; vertical-align: middle; } 
 
some text

Yo tuve el mismo problema. Esto funciona para mí:

  

Al usar el método de table y table-cell , especialmente porque también se dirige a navegadores antiguos, creo un fragmento para que pueda ejecutarlo y verifique el resultado:

 .wrapper { position: relative; display: table; width: 300px; height: 200px; } .inside { vertical-align: middle; display: table-cell; } 
 

Centre me please!!!

La mejor solución es esa

 .block{ /* decor */ padding:0 20px; background:#666; border:2px solid #fff; text-align:center; /* important */ min-height:220px; width:260px; white-space:nowrap; } .block:after{ content:''; display:inline-block; height:220px; /* the same as min-height */ width:1px; overflow:hidden; margin:0 0 0 -5px; vertical-align:middle; } .block span{ vertical-align:middle; display:inline-block; white-space:normal; } 

He estado jugando con el uso de relleno para la alineación central. Tendrá que definir el tamaño del contenedor externo de nivel superior, pero el contenedor interno debería cambiar de tamaño, y puede configurar el relleno en diferentes valores porcentuales.

jsfiddle

 
.container { padding: 20%; background-color: blue; } img { width: 100%; }

El antiguo enlace de JSFiddle que publiqué aquí ya no funcionaba, esa es probablemente la razón del voto a favor. Solo por el hecho de que se trata de una respuesta válida, todavía quiero publicar la solución jQuery nuevamente. Esto funciona para cada elemento que tiene aplicada la clase v_align . Se centrará verticalmente en el elemento principal y al redimensionar la ventana se volverá a calcular.

Enlace a JSFiddle

 $(document).ready(function() { // define the class that vertial aligns stuff var objects = '.v_align'; // initial setup verticalAlign(objects); // register resize event listener $(window).resize(function() { verticalAlign(objects); }); }); function verticalAlign(selector) { $(selector).each(function(val) { var parent_height = $(this).parent().height(); var dif = parent_height - $(this).height() // should only work if the parent is larger than the element var margin_top = dif > 0 ? dif/2 : 0; $(this).css("margin-top", margin_top + "px"); }); } 

¿que tal este?

 position: absolute; top: calc(50% - 0.5em); left: calc(50% - 0.5em); line-height: 1em; 

y puedes variar font-size

¿Desea alinear una imagen que tiene después de un texto / título y ambos están dentro de un div?

Ver en JSfiddle o Ejecutar Fragmento de Código.

Solo asegúrese de tener una identificación o una clase en todos sus elementos (div, img, title, etc.).

Para mí funciona esta solución en todos los navegadores (para dispositivos móviles debes adaptar tu código con: @media).

 h2.h2red { color: red; font-size: 14px; } .mydivclass { margin-top: 30px; display: block; } img.mydesiredclass { margin-right: 10px; display: block; float: left;/*If you want to allign the text with an image on the same row*/ width: 100px; heght: 100px; margin-top: -40px/*Change this value to adapt to your page*/; } 
 

Text alligned after image inside a div by negative manipulate the img postion

Este código funciona bien para mí.

  

Además, puede usar Flexbox para lograr el resultado correcto:

 .parent { align-items: center; /* for vertical align */ background: red; display: flex; height: 250px; /* justify-content: center; <- for horizontal align */ width: 250px; }