alineación vertical de la imagen dentro de un div

Quiero establecer la alineación vertical de la imagen dentro de un div. Yo uso img {vertical-align: middle} pero no está funcionando.alineación vertical de la imagen dentro de un div

Fuente

2011-03-25 Deepa

posiblemente relacionados: http://stackoverflow.com/questions/3535689/text-in-vertical-middle-of-div – Blender

Como novato, es posible que desee volver a votar algunas de estas respuestas, ya que lo están apuntando en la dirección correcta y todos nos estamos tomando tiempo de trabajo/vida para ayudarnos unos a otros. –

Utilizando la propiedad line-height va a resolver el problema:

<style> 
.someclass { 
    width: 300px; 
    height: 300px; 
    text-align: center; 
    line-height: 300px; 
    border: dotted; 
} 
.someclass img { 
    margin: auto; 
    vertical-align: middle; 
} 
</style> 
<div class="someclass"> 
    <img src="someimg.jpg" border="0" alt=""> 
</div>

Fuente

2011-03-25 06:15:37

uso este código pero no está funcionando en ie – Deepa

por ejemplo, puede que tenga que introducir el zoom –

A diferencia de mostrar la celda de tabla, esto funciona como un encanto hasta IE7. ¡Gracias! –

Si se establece el atributo div display a continuación table-cellvertical-align: middle; va a funcionar.

La regla vertical-align solo afecta a celdas o elementos de tabla con display: table-cell.

Ver this article from SitePoint para una explicación más detallada.

<style> 
/* change body to .someClasses's parent */ 

body { 
    width: 100%; 
    height:  100%; 
    display: table; 
} 
body > .someclass { 
    width: 300px; 
    height: 300px; 
    text-align: center; 
    border:dotted; 
    margin: 0 auto 
    display: table-cell; 
    vertical-align: middle; 
} 
</style> 

<body> 
    <div class="someclass"> 
     <img src="someimg.jpg" border="0" alt=""> 
    </div> 
</body>

Fuente

2011-03-25 06:23:17 xzyfer

uso este código pero no funciona por favor pruébate primero – Deepa

tienes razón, me perdí algo. He actualizado el código para trabajar. Si realmente se hubiera tomado la molestia de tomarse el tiempo de leer el enlace que publiqué, lo habrá notado usted mismo y ya solucionó este problema. Por favor, esfuérzate por aprender algo simplemente pidiendo respuestas. – xzyfer

pantalla: table-cell no funciona en ie6 – Deepa

Si está tratando de hacer lo que creo, la alineación vertical no va a funcionar; necesitarás usar posicionamiento

En general, coloque el contenedor relativo, y luego coloque la imagen absoluta, con la parte superior e izquierda configuradas al 50%, y luego mueva la imagen al centro estableciendo márgenes negativos igual a la mitad del ancho/alto.

Aquí está un ejemplo de trabajo: http://jsbin.com/evuqo5/edit

básico CSS es la siguiente:

#container { position: relative; } 
#container img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-top: /* -1/2 the height of the image */ 
    margin-left: /* -1/2 the width of the image */ 
}

Fuente

2011-03-25 06:31:38 RussellUresti

No quiero calcular el alto y el ancho de cada imagen – Deepa

Publicaré otra solución que funcionará sin JavaScript, pero puede no ser compatible con todos los navegadores. – RussellUresti

¡Agradable! Funciona a las mil maravillas. Gracias – CHaP

El siguiente post tiene algunas referencias útiles:

Text Alignment w/ IE9 in Standards-Mode

También, dependiendo de la versión de IE está probando en contra, puede terminar necesitando algunos hacks específicos del navegador o algún código jQuery/JavaScript.

Si es necesario, utilice una tabla de una sola fila y aproveche la propiedad vertical-align. Esto es fuerza bruta, no excesivamente semántica, pero funciona.

Fuente

2011-03-25 10:50:49

Esta es una solución que no requiere JavaScript (como lo hizo mi solución anterior).

Puedes lograr lo que quieras asignando display: table-cell al div que lo contiene. Aquí hay un ejemplo: http://jsbin.com/evuqo5/2/edit

Creo que debo advertirle que tendrá que probar esto en cada navegador que pretenda admitir. El soporte para el valor table-cell es bastante nuevo, particularmente en Firefox. Sé que funciona en Firefox 4, pero no sé sobre ninguna de las iteraciones 3.x. También querrás probar en IE (solo he probado en Chrome 10 y Firefox 4).

El CSS:

div#container { 
    width: 700px; 
    height: 400px; 
    position: relative; 
    border: 1px solid #000; 
    display: table-cell; 
    vertical-align: middle; 
    } 
    div#container img { 
    margin: 0 auto; 
    display: block; 
    }

Usted no necesitará los estilos div#container img si no también desea alinear horizontalmente la imagen.

Fuente

2011-03-29 17:01:44 RussellUresti

Esto no funcionará si necesita usar un porcentaje para la altura, como era mi caso. –

Ver este awser: How to vertical align image inside div

Si desea alinear horizontalmente También, agregue el right y left, así:

div { 
    position:relative; 
} 
img { 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:auto; 
}

Fuente

2013-07-01 02:40:24 silviomoreto

no funciona en cromo –

alineación vertical de la imagen dentro de un div

Respuesta

Cuestiones relacionadas