CODEWITHSUNDEEP
htmlcssimagevertical-alignment
steventnorris
steventnorris

Reputation: 5876

Center Image with Vertical Align

Images will not center with vertical align for me, as it seems they should. I am coding for IE7 in quirks mode only (unfortunately). My code is below. Anyone know why this wouldn't vertically align

<html>
<head>
</head>
<body>
<div style="height:500px; width 500px; line-height:500px; background-color:Green; vertical-align:middle;">
   <img src="./images/load.gif" style="vertical-align:middle;"/>
</div>
</body>
</html>

Upvotes: 0

Views: 645

Answers (2)

Brett
Brett

Reputation: 2823

You can make the image a background image instead and then center the background with something like the following:

<div style="height:500px; width 500px; line-height:500px; background: green url('/images/load.gif') left center no-repeat ; "></div>

Upvotes: 0

Billy Moat
Billy Moat

Reputation: 21050

If you want to vertically align your image within the div you should do the following:

div {
    position:relative;
    height:500px;
    width:500px;
}

div img {
    position:absolute;
    top:50%;
    margin-top:-XXXpx; /* where XXX is half the height of the image */
}

Upvotes: 1

Related Questions