Use Bodhi Linux—It's awesome!

hasLayout.net

Share |

No line-height Vertical Center on Images Bug

Affected Versions

This bug affects: IE7, IE6

Symptoms

Images are not vertically centered using line-height method

Date of the Tutorial

Sat Jul 18 11:39:56 2009

Description

Here's a bug that sure has killed some of my brain cells back in the day. I often make "product pages" with lots of different-sized thumbs that I like to put in even sized boxes to make them look pretty... even since the time I found a fix for this bug, I still hate it quite a bit because the only solution I can find requires adding extra markup. Anyway, let's take a gander at the demo:

Demo

HTML Code:
<div><img src="hl_logo.png" alt="" width="95" height="115"></div>

<!-- NOTE: no white-space in the <div> also triggers bug in IE7 -->
CSS Code:
div {
    width: 150px;
    height: 155px;
    line-height: 155px;
    text-align: center;
}
img {
    vertical-align: middle;
}

In IEs below IE8 the image of a ladybug is not vertically centered (hey, at least it's displayed at all!).

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Markup Solution)

Date of the Solution

Sat Jul 18 11:52:58 2009

Fixed Versions

all of the affected

Description

Now, I would say that while this solution is marked as "Clean Markup Solution", if the lowest IE version that you are supporting is 7, then simply add the whitespace inside the div (that is, the <span> element is needed only for IE below 7)

HTML Code:
<div>
    <img src="hl_logo.png" alt="" width="95" height="115">
    <span></span>
</div>

<!-- NOTE: <span> is not needed for IE7; whitespace is enough -->
CSS Code:
div {
    width: 150px;
    height: 155px;
    line-height: 155px;
    border: 1px solid #000;
    background: #f00;
    text-align: center;
}
img {
    vertical-align: middle;
}
span {
    display: inline-block;
}

Note that we added an extra span for fixing the bug in IE versions below 7; we also used display property set to inline-block to give our precious span "layout". End result - everything works fine.

Comments

Create new comment

  • Cristian

    Fri Nov 18 20:33:21 2011

    Thank you very very much. You make my day a happy day.

  • Benoit Hirbec

    Mon Jul 11 00:49:15 2011

    Hi,

    Thanks a lot for sharing your solution.

    Using a div with a background works fine on ie6, ie7, ie8, ff & chrome. Unfortunately it's only possible to so if you can set the container size.

    My HTML looks like this:

    <div id="lady-bug" />

    And here the CSS code:

    #lady-bug {
    width: 150px;
    height: 155px;
    background: red url(hl_logo.png) no-repeat scroll center center;
    border: 1px solid #000;
    }

    Hope this will help to preserve some brain cells (I lost some of them too :)

    Thanks,
    Benoit

  • ecofe

    Sat Apr 2 02:21:30 2011

    <div>
    <img src="hl_logo.png" alt="" width="95" height="115">
    </div>
    try this

  • Craig

    Wed May 26 08:52:24 2010

    Thanks a lot for your bug fix for IE6. Sorted me out after an hour of messing about. Gawd, I hate IE6! :-(

    (on a side note - I've had IE6 open for testing purposes and when I do - you dont have a navigation at all! Might wanna chack that IE6 bug out too ;-))

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book:

Support Wikipedia