Please see the attached example, i have shown the cross-browser (IE 5.5, 6, 7, FF & Safari) solution which will enable you to vertically align middle an image in a div.
- Code: Select all
<html>
<head>
<title>Vertically Center Position in DIVs</title>
<style type="text/css">
<!--
.product
{
width : 124px;
text-align : center;
}
.product div.img
{
border : solid 1px #000000;
background : #ffffff;
margin-bottom : 5px;
padding : 1px;
overflow : hidden;
}
.product div.img div
{
height : 120px;
overflow : hidden;
}
.product div.img div div
{
width : 120px;
height : 120px;
text-align : center;
background : #dddddd;
font-size : 105px;
overflow : hidden;
}
.product div.img div div img
{
vertical-align : middle
}
html>body .product div.img div div
{
display : table-cell;
vertical-align : middle;
}
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.product div.img div div
{
display : table-cell;
vertical-align : middle;
}
}
-->
</style>
</head>
<body>
<table border="1" cellpadding="25" cellspacing="0" width="500">
<tr>
<td width="60%" align="center">
<b>Vertically Center Position in DIVs</b><br>
(Smaller Image)<br>
</td>
<td width="40%" bgcolor="#ffff00" align="center">
<div class="product">
<div class="img">
<div><div><img src="test1.jpg"></div></div>
</div>
<b>Test Image</b>
</div>
</td>
</tr>
<tr>
<td colspan="2" height="20"></td>
</tr>
<tr>
<td width="60%" align="center">
<b>Vertically Center Position in DIVs</b><br>
(Larger Image)<br>
</td>
<td width="40%" bgcolor="#ffff00" align="center">
<div class="product">
<div class="img">
<div><div><img src="test2.jpg"></div></div>
</div>
<b>Test Image</b>
</div>
</td>
</tr>
</table>
</body>
</html>
