Center IMAGE horizontal and vertical? [Archive]

Asher01

09-18-2011, 12:42 AM

Yes, using div's then assigning the margin and/or padding properties to center either the div itself of the content contained in the div.

You can also use : { margin-left:auto; margin-right:auto; }

This will automatically divide any remaining space between the two margins, effectively resulting in a perfect center.

coothead

09-18-2011, 10:12 AM

Hi there freshfan,

here is an example....

<!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=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>image centered vertically and horizontally</title>

<style type="text/css">
html,body {
height:100%;
margin:0;
}
body {
min-height:280px; /* this is the image height */
background-color:#f60;
}
#vertical {
float:left;
width:100%;
height:50%;
margin-top:-140px; /* this is half the image height */
}
#container {
clear:both;
}
#container img {
display:block;
width:360px;
height:280px;
margin:auto;
}
</style>

</head>
<body>

<div id="vertical"></div>

<div id="container">
<img src="http://www.coothead.co.uk/images/banana.jpg" alt="fruit">
</div>

</body>
</html>

coothead