Sent by Austin Govella on 27 February 2002 14:02
E. Jordan Bojar wrote:
> Although I've worked extensively with CSS2's typographic features, I can't
> seem to figure out how to center a single image horizontally and vertically
> on a single page. Is there a simple trick for this I've missed somewhere?
AFAIK you can't single an image vertically using just CSS. I've seen a
javascript hack or two, but I can't speak on their reliability.
Horizontal centering is accomplished by setting the margins of the block
surrounding the image to auto. Or you could set the image's display to
block and set the images margins to auto.
img {display: block;
margin: auto; }
You can also fudge using text-align: auto for the block surrounding the
image. I think this works most consistently across more browsers,
although it's not the correct way to center.
#splash {text-align: center; }
<div id="splash">
<img />
</div>
You could bump the image down from the top to make it appear more
centered vertically. I've seen a lot of sites do this, and it looks nice.
--
Austin
