CSS - centre verticalement une image dans une div flottante

J'ai décidé de jeter l'éponge sur ce problème et ont besoin d'un peu d'aide :). Comme par titre en essayant d'aligner verticalement une image enveloppé dans un élément ancre dans le centre d'une flotté hauteur fixe div.

Fait beaucoup de googler pour les solutions et le placard que je puisse avoir est ci-dessous lors de la div n'est pas flotté (elle doit être). Toutes les idées seront greatfully apprécié!

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

source d'informationauteur Hayden

  1. 20

    Bien, je suis tombé sur le même problème hier soir (pour une galerie genre de chose), et a réussi à trouver une solution après avoir trébuché sur cette page. Je suis heureux de signaler cela semble également fonctionner pour flottait éléments!

    L'astuce consiste essentiellement à donner à l'élément extérieur "display: table;", et l'intérieur de l'élément (contenant de l'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>

    Pour IE8, vous avez besoin d'être en mode standard. Certains de positionnement supplémentaires est nécessaire pour le faire fonctionner dans 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]-->
  2. 1

    Si la hauteur est fixe et que vous connaissez la taille de l'image, juste la position de l'image manuellement. Utilisation position:absolute;top:25px; sur l'image ou quelque chose comme ça, ou ajouter une marge à l'image: margin:25px 0;.

  3. 0

    Il y a une croix navigateur css solution pour ce disponible ici: http://www.vdotmedia.com/blog/vertically-center-content-with-css/