CSS: centre verticalmente una imagen dentro de un div flotante

He decidido arrojar la toalla sobre este problema y necesito ayuda :). Según el título que intenta alinear verticalmente una imagen envuelta en un elemento de anclaje en el centro de un div flotante de altura fija.CSS: centre verticalmente una imagen dentro de un div flotante

He hecho muchas búsquedas en Google para encontrar soluciones y el clóset que puedo encontrar está debajo cuando el div no está flotando (como sea necesario). ¡Cualquier idea sería muy apreciada!

.class_name { 
/*float: left*/ 
width:153px; 
height:153px; 
margin:3px; 
padding:4px; 
border:1px solid #dedede; 
text-align: center; 
vertical-align: middle; 
background-color: #000; 
display: table-cell; 
} 

<div class="class_name"> 
    <a href=""><img src="image.jpg" alt="" /></a> 
</div>

Fuente

2010-09-07 Hayden

¿Alguien más tiene alguna idea? – Hayden

Si la altura es fija y conoce el tamaño de la imagen, simplemente coloque la imagen manualmente. Use position:absolute;top:25px; en la imagen o algo así, o agregue un margen a la imagen: margin:25px 0;.

Fuente

2010-09-07 02:30:24 mattbasta

Desafortunadamente, la imagen puede tener una altura diferente a veces. ¡Gracias! – Hayden

Hay una solución navegador CSS cruz por esto aquí disponibles: http://www.vdotmedia.com/blog/vertically-center-content-with-css/

Fuente

2010-09-07 02:44:52 Jamie

Ah sí, me encontré con esto. Todavía el mismo problema, aunque flotó, ¡qué muy frustrante! – Hayden

Bueno, me encontré con el mismo problema ayer por la noche (para un tipo de galería-como de cosas), y logró encontrar una solución después de tropezar en this page. Me complace informar que esto también parece funcionar para elementos flotables.

El truco consiste básicamente en dar al elemento externo "display: table;", y el elemento interno (que contiene el img) "display: table-cell;".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html><head> 
<style type="text/css"> 
.class_name { 
    display: table; 
    float: left; 
    overflow: hidden; 
    width: 153px; 
    height: 153px; 
} 

.class_name a { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 
</style> 
</head> 
<body> 
    <div class="class_name"> 
     <a href=""><img src="image.jpg" alt="" /></a> 
    </div> 
</body> 
</html>

Para IE8, debe estar en modo estándar. Se necesita un posicionamiento adicional para que funcione en IE7:

<!--[if lte IE 7]><style type="text/css"> 
.class_name { 
    position: relative; 
} 
.class_name a { 
    position: absolute; 
    top: 50%; 
} 
.class_name img { 
    position: relative; 
    top: -50%; 
    width: 100%; 
} 
</style><![endif]-->

Fuente

2010-10-14 10:23:25 Paul

aseado. No sé si es la mejor manera pero funciona bien http://www.jsfiddle.net/NgqE2/ – Shikiryu

@Shikiryu ¡Gracias! ¡Funcionó para mí al fin! – jibiel

Recuerde poner la imagen dentro de otra etiqueta. Fue '' en este caso. De lo contrario, no funcionará. – Ciwan

CSS: centre verticalmente una imagen dentro de un div flotante

Respuesta

Cuestiones relacionadas