Pregunta sobre css, vertical-alignment, image – alinear verticalmente la imagen en div [duplicar]

58

Esta pregunta ya tiene una respuesta aquí:

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

Tengo problemas con la alineación vertical de la imagen 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é, necesito "display: block;" colocar la imagen en el centro y eso funciona. ¡También en los tutoriales encuentro muchas respuestas pero no son "útiles", porque toda mi imagen NO está a la misma altura!

Tu respuesta

3   la respuesta
23

hoy en dí CSS3 hace que la alineación vertical sea realmente¡simple

Solo agregue a la<div> este css:

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

JSFiddle demo

Ejemplo en vivo:

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

Nice, ¿debería tener miedo de usar esto si es realmente nuevo? MarksCode
@ MarksCode ya es compatible con todos los navegadores modernos (IE11 +) verPuedo usa. También funciona en IE10 con versión prefijada Jaqen H'ghar
3

ineación vertical para elementos en línea y de bloque que puede tomar como se menciona a continuación: -

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 demostración: -http: //jsfiddle.net/Ewfkk/2

132

puede configurar la altura de la línea para que sea igual a la altura, y se centrará verticalmente. Luego solo agregue text-align para centrar horizontalmente.

Aquí hay un ejemplo:http: //jsfiddle.net/Cthulhu/QHEnL/1

EDITA

Su código debería verse así:

.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 horizontal y verticalmente, sin importar su tamaño. Aquí hay 2 ejemplos más con imágenes con diferentes dimensiones:

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

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

ACTUALIZA

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

Volver en 2014,Microsoft anunció que dejará de admitir 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é importa esto? Con el anunciadola muerte de IE8, finalmente podemos comenzar a usar CSS3 mágico

icho esto, aquí hay una forma actualizada de alinear elementos, tanto horizontal como verticalmente:

.container {
    position: relative;
}

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

Usando estotransform: translate(); método, ni siquiera necesita tener una altura fija en su contenedor, es completamente dinámico. ¿Su elemento tiene altura o ancho fijo? ¿Tu contenedor también? ¿No? No importa, siempre estará centrado porque todas las propiedades de centrado se fijan en el elemento secundario, es independiente del elemento primario. Gracias CSS3.

Si solo necesita centrarse en una dimensión, puede usartranslateY otranslateX. Solo pruébalo por un tiempo y verás cómo funciona. Además, intente cambiar los valores de latranslate, lo encontrará útil para muchas situaciones diferentes.

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

Para más información sobretransform, aquí hay un buen recurso.

Codificación feliz.

La respuesta de Cthulhu es correcta, pero si verifica los píxeles una y otra vez después de la imagen, notará que el div tiene una parte superior de relleno molesto de 3 píxeles (depende del tamaño de la fuente). Para deshacerse de él, simplemente agregue font-size: 0; a la div. ragnar
Esto parecía una solución tan simple pero no pude hacer que funcionara. Después de aislar cada parte de mi plantilla de WordPress, descubrí que mi doctype era el problema. ¡Cambió de 4.0 doctype de transición a HTML5 y funcionó! Esperemos que esto ayude a otros que puedan estar teniendo el mismo problema user1380540
¡Esa actualización fue embrague! TY !! Sensei James
Gracias por actualizar la respuesta a partir de 2016. ¡Funciona de maravilla! Phuong Nguyen
¡La actualización de 2016 de esta respuesta es oro! ;) chrisv

Preguntas relacionadas