Cómo alinear verticalmente una imagen dentro de un div

Question

Más

Arnaud Le Blanc

Question

Cómo alinear verticalmente una imagen dentro de un div

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

Ejemplo

En mi ejemplo, necesito centrar verticalmente la <img> en el <div> con class ="frame":

<div class="frame" style="height: 25px;">
    <img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" />
</div>

.frame's height is fixed and image's height is unknown. Puedo añadir nuevos elementos en .frame si esa es la única solución. Estoy intentando hacer esto en Internet Explorer 7 y posteriores, WebKit, Gecko.

Ver el jsfiddle [aquí][1].

begin snippet: js hide: false console: true babel: false -->

.frame {
    height: 25px;      /* Equals maximum 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;
}

<div class=frame>
   <img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=250 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=25 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=23 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=21 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=19 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=17 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

Benjamin Udink ten Cate · Answer 1 · 2011-09-04T13:17:02+00:00

Solución de la imagen de fondo

He eliminado el elemento imagen por completo y lo he puesto como fondo del div con una clase .frame.

Esto al menos funciona bien en Internet Explorer 8, Firefox 6 y Chrome 13.

Lo he comprobado, y esta solución no funciona para reducir imágenes de más de 25 píxeles de altura. Hay una propiedad llamada background-size que sí establece el tamaño del elemento, pero es CSS 3 que entraría en conflicto con los requisitos de Internet Explorer 7.

Le aconsejaría que rehaga las prioridades de su navegador y diseñe para los mejores navegadores disponibles, o que consiga algún código del lado del servidor para redimensionar las imágenes si quiere utilizar esta solución.

Joseph Marikle · Answer 2 · 2011-09-04T17:34:04+00:00

Joseph Marikle

4º septiembre 2011 в 5:34

Más

Podrías hacer esto:

Demo

/embedded/result,js,html,css/">

CSS

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 60px;
    border: px solid red;

    text-align: center; 
    margin: em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 60px;
    top: 50%;           /* Here.. */
    left: 50%;          /* Here... */
    position: absolute; /* And here */
}

JavaScript

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

anglimasS · Answer 3 · 2011-09-01T17:29:55+00:00

Esto funciona para los navegadores modernos (2016 en el momento de la edición) como se muestra en este demo en 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 que utilices la herencia para apuntar a las imágenes que necesitas centradas. En este ejemplo usamos .frame img {} para que sólo las imágenes envueltas por un div con una clase de .frame se centren.