Centering this image in a div

I am trying to center the image in the div in the code below, but it remains at the top. Why is this so?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
	
	.container {
		width: 300px;
		height: 400px;
		background-color: #0FF;
		padding: 10px;
		margin-top: 30px;
	}
	
	/*.container img {position:relative; top:50%; margin-top: -25px;}*/
	
	.container img {vertical-align: middle;}
	
	.container p {line-height: 400px;

</style>
</head>

<body>

<div class="container">
	<img src="blue.gif" width="50" height="50" />
</div>

<div class="container">
	<p>Hello World</p>
</div>

</body>
</html>

CSS doesn’t like vertically aligning stuff. Might I recommend just calculating the needed padding to be added to the top of the image to make it centered? I know it might not be the answer you are looking for however. I do believe there are some other ways around it with a little more work if you are using multiple images of different heights.

Hi,
Vertical centering with CSS is a bit tricky, what you need to remember is that the vertical-align property only applies to inline elements and tables. That includes CSS tables and display:inline-block.

Anytime you use vertical-align on an inline element it needs another inline element on the same line to reference it’s vertical-alignment from. That is where an empty span comes in at. The span will need height:100%; set on it but inline elements can’t take on dimensions. That is where inline-block comes in, it will allow dimensions to be set while retaining inline behavior.

See Gary T.'s article on Vertical Centering for more details.

Something like this should get you pointed in the right direction though. :slight_smile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vertical Centering with Inline-Block</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font:100%/1.3 arial,helvetica,sans-serif;
}
.wrap {
    float:left;
    width:300px;
    height:400px;
    margin:30px 0 0 30px;
    display:inline;/*IE6 double margin bug*/
    padding:10px;
    background:#CCC;
    text-align:center;
}
.wrap img,
.wrap p,
.wrap span {
    display:inline-block;
    vertical-align: middle;
}
.wrap img {
    background:#333;
}
.wrap p {
    margin:0;
    text-align:justify;
    background:#FFF;
}
.wrap span {
    height:100%;
    font-size:0;
}

/*IE6/7 inline-block workarounds*/
* html .wrap img,
* html .wrap p,
* html .wrap span {display: inline;}

* + html .wrap img,
* + html .wrap p,
* + html .wrap span {display: inline;}
</style>

</head>
<body>

<div class="wrap">
    <img src="blue.gif" width="50" height="50" />
    <span></span>
</div>

<div class="wrap">
    <p>Lorem ipsum dolor sit amet consectetuer sed id aliquet fermentum nisl. 
    Lacinia eget Ut dictumst sagittis interdum Nullam leo fermentum lorem augue. 
    Curabitur amet dictum ac id velit porta mollis consequat elit metus.</p>
    <span></span>
</div>

</body>
</html>