ansaurus

Question

CSS - vertically center an image within a floated div

Answer 1

A:

If the height is fixed and you know the size of the image, just position the image manually. Use position:absolute;top:25px; on the image or something like that, or add a margin to the image: margin:25px 0;.

mattbasta 2010-09-07 02:30:24

Unfortunately the image can be a different height sometimes. Thanks though!

Hayden 2010-09-07 03:28:19

Answer 2

A:

There is a cross browser css solution for this available here: http://www.vdotmedia.com/blog/vertically-center-content-with-css/

Jamie 2010-09-07 02:44:52

Ah yes I came across this. Still same issue though when it's floated which very frustrating!

Hayden 2010-09-07 03:30:49

Answer 3

+2 A:

Well, I bumped into the same issue last night (for a gallery-like type of thing), and managed to find a solution after stumbling onto this page. I'm happy to report this also seems to work for floated elements!

The trick is basically to give the outer element "display: table;", and the inner element (containing the img) "display: table-cell;".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<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>

For IE8, you do need to be in standards mode. Some additional positioning is needed to get it to work in 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]-->

Paul 2010-10-14 10:23:25

neat. Don't know if it's the best way but works nice http://www.jsfiddle.net/NgqE2/

Chouchenos 2010-10-14 10:36:12

ansaurus

tags:

views:

answers:

CSS - vertically center an image within a floated div

related questions