imagen vertical-align en div

Question

que tengo un problema en esta imagen vertical-align en div

.img_thumb { 
    float: left; 
    height: 120px; 
    margin-bottom: 5px; 
    margin-left: 9px; 
    position: relative; 
    width: 147px; 
    background-color: rgba(0, 0, 0, 0.5); 
    border-radius: 3px; 
} 

.img_thumb img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    vertical-align: middle; 
} 

<div class="img_thumb"> 
    <a class="images_class" href="large.jpg" rel="images"><img src="small.jpg" title="img_title" alt="img_alt" /></a> 
</div> 

Por lo que sé que necesito "display: block;" para posicionar la imagen en el centro y eso funciona. También en los tutoriales encuentro muchas respuestas, pero no son "útiles", ¡porque todas mis imágenes NO tienen la misma altura!

Answer 1

Si tiene una altura fija en su contenedor, puede configurar la altura de la línea para que sea igual a la altura, y se centrará verticalmente. Luego solo agrega text-align para centrar horizontalmente.

He aquí un ejemplo: http://jsfiddle.net/Cthulhu/QHEnL/1/

EDITAR

El código debería tener este aspecto:

.img_thumb { 
    float: left; 
    height: 120px; 
    margin-bottom: 5px; 
    margin-left: 9px; 
    position: relative; 
    width: 147px; 
    background-color: rgba(0, 0, 0, 0.5); 
    border-radius: 3px; 
    line-height:120px; 
    text-align:center; 
} 

.img_thumb img { 
    vertical-align: middle; 
} 

Las imágenes siempre estarán centradas en horizontal y en vertical, sin importar su tamaño es . Aquí es 2 más ejemplos con imágenes con diferentes dimensiones:

http://jsfiddle.net/Cthulhu/QHEnL/6/

http://jsfiddle.net/Cthulhu/QHEnL/7/

ACTUALIZACIÓN

Ahora es 2016 (el futuro!) Y parece que algunas cosas están cambiando (por fin! !).

Detrás en 2014, Microsoft announced que dejará de soportar IE8 en todas las versiones de Windows y alentará a todos los usuarios a actualizar a IE11 o Edge. Bueno, se supone que esto sucederá el próximo martes (12 de enero).

¿Por qué es esto importante? Con el anunció la muerte de IE8, finalmente podemos comenzar a usar CSS3 magia.

Con eso se dice, aquí es una forma actualizada de elementos de alineación, tanto horizontal como verticalmente:

.container { 
    position: relative; 
} 

.container .element { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
} 

uso de este método transform: translate();, usted ni siquiera necesita tener una altura fija en su contenedor, es completamente dinámico. ¿Tu elemento tiene altura o ancho fijos? ¿Tu contenedor también? ¿No? No importa, siempre estará centrado porque todas las propiedades de centrado están fijadas en el niño, es independiente del padre. Gracias CSS3.

Si solo necesita centrar en una dimensión, puede usar translateY o translateX. Pruébalo por un tiempo y verás cómo funciona. Además, intente cambiar los valores del translate, lo encontrará útil para un montón de situaciones diferentes.

Aquí, tienen un nuevo violín: https://jsfiddle.net/Cthulhu/1xjbhsr4/

Para obtener más información sobre transform, here's a good resource.

Happy coding.

Answer 2

no necesitas definir el posicionamiento cuando se necesita alinear el centro vertical para elementos en línea y de bloque que puede tomar se mencionan a continuación idea: -

inline-elements :- <img style="vertical-align:middle" ...> 
        <span style="display:inline-block; vertical-align:middle"> foo<br>bar </span> 

block-elements :- <td style="vertical-align:middle"> ... </td> 
        <div style="display:table-cell; vertical-align:middle"> ... </div> 

ver la demo: - http://jsfiddle.net/Ewfkk/2/

Answer 3

vieja pregunta, pero hoy en díaCSS3 hace alineación vertical realmente simple!

Sólo tiene que añadir a la <div> este CSS:

display:flex; 
align-items:center; 
justify-content:center; 

---

JSFiddle demo

vivo Ejemplo:

.img_thumb { 
 
    float: left; 
 
    height: 120px; 
 
    margin-bottom: 5px; 
 
    margin-left: 9px; 
 
    position: relative; 
 
    width: 147px; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    border-radius: 3px; 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
}

<div class="img_thumb"> 
 
    <a class="images_class" href="http://i.imgur.com/2FMLuSn.jpg" rel="images"> 
 
     <img src="http://i.imgur.com/2FMLuSn.jpg" title="img_title" alt="img_alt" /> 
 
    </a> 
 
</div>