Forum Moderators: not2easy
Im using css and was wondering how you get a picture to lie in the middle of a floating column ?
below is what im using but it is not in the middle ?
#middle{
position: relative;
width:40%%;
left:12.5%;
}
Sample code would make it clear.
To center things horizontally, you have some options:
- if it has width, apply auto margins on the left and right
- if it is inline: set text-align: center on the parent
- if you want to position it absolutely:
put it at 50%, and then give it a negative margin of half it's width
There are probably a few more
AFAIK there's no method to center top and bottom.
tangor, you're right there's not really a way unless you know the height of the column whether implicitly or explicitly.. in which case the AP positioning method should work fine too.. e.g. top: 50%; margin-top: -(half image height)px
or there is an inline-block hack.. but again whether it would work for you would depend on your actual requirement.. this one would center images of varying heights as long as the implicit/explicit height of the container (or column) is calculated
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta>
<title>Vertical Center</title>
<style type="text/css" media="screen">
html, body {padding: 0; margin: 0; border: 0;}#wrap {height: 300px; width: 500px; background: #abc; margin: 0 auto;}
.rowbox {
text-align: center; /* horizontally center inline blocks */
height: 100%;
}.inlinebox {
display: -moz-inline-box; /* For FF2 and below */
display: inline-block; /* IE needs a wee bit of help see conditional below */
background: #eee;
border: 3px solid #000;
text-align: left; /* to reset text alignment within divs when container has been set to center */
vertical-align: middle; /* vertically aligns side by side boxes with preceding ones */
}/* widthless spacer to give height for vertical alignment */
.h100 {height: 100%; border: 0; width: 0;}</style>
<!--[if lte IE 7]>
<style type="text/css" media="screen">
.inlinebox {display: inline;}
</style><![endif]-->
</head>
<body>
<div id="wrap"><div class="rowbox">
<span class="inlinebox h100"></span>
<div class="inlinebox"><img src="http://www.searchengineworld.com/gfx/logo.png" alt="WebmasterWorld logo"></div>
</div></div>
</body>
</html>
And then there is also "position: absolute; top: 0; bottom: 0;", yes that centers vertically too, but not in IE. Works also in horizontal fashion if you set left and right to be zero.
