Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

center images

css problems centering images



4:03 pm on Feb 1, 2008 (gmt 0)

5+ Year Member

I can't for the life of me get images of various sizes to center in a div class. Here is my html and css:

<div id='column2'>
<h1>Centered Image</h1>
<div class="centerscreenshot"><img src="../../images/centeredimage.gif" alt='centeredimage'/></div>

<div class='breadcrumb'>
<a href='widget.htm'>Back to Specifications</a>
</div><!-- end column2 -->


.centerscreenshot img {
min-height: 10em;
display: table-cell;
vertical-align: middle;
margin-bottom: 20px;


3:02 am on Feb 2, 2008 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

Center vertically, I assume? Are you referring to Internet Explorer? because IE6 does not support display:table-cell.


5:04 am on Feb 2, 2008 (gmt 0)

5+ Year Member

Yes sorry, center vertically. What I currently have posted was from a tutorial posting I found after a google search. It didn't work in Firefox either which is what I usually do all of my testing with.


3:12 pm on Feb 2, 2008 (gmt 0)

5+ Year Member

Can you just use <center>? If thats what your asking, but I could be wrong.


4:41 pm on Feb 2, 2008 (gmt 0)

5+ Year Member

The <center> element has be depreciated in HTML 4.01 and is not supported in XHTML 1.0 Strict DTD.

I just haven't been able to find a good way to center vertically with css. I know I'm probably just over looking something but I can't figure it out.


8:47 pm on Feb 2, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

I've looked into fully centering things a while ago (just needed a placeholder page with a centered logo on it).

Perhaps some of it might help you.

Bottom line of what I found: It sucks.

There is an obvious standard way to center stuff vertically: auto margins.

A second trick: "

position: absolute; top: 0; right: 0; bottom: 0; left: 0;
", it might not be usable in tables, hard to say as I don't do tables unless I have to represent tabular or matrix data.

For IE a centered image on the background worked somewhat, but it was far from optimal.

The code I used for a few weeks:
(donating it to the public domain, feel free to use):


<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" xml:lang="en" lang="en">
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<img id="mainlogo" src="logo.gif" alt="LOGO" />



* {margin: 0; font-family: Verdana, Arial, Helvetica, sans-serif;}
body {background-color: rgb(255,128,0); color: black; text-align: center;}
h1 {font-size: 16pt}
#mainlogo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 359px; height: 498px; margin:auto; }



body {background-position: center center; background-image: url(logo.gif); background-repeat: no-repeat; height: 600px}
#mainlogo {display:none}


I'm sure it can be done better, but I had little time and
as long as it had the look the customers want it was good.


4:50 am on Feb 4, 2008 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

Huh, I have not heard of that method. I like it (I've tried playing around with auto-height margins before, but couldn't figure out how to get them). But can it work on variable/unspecified (get from image properties) heights of the image? (you included size in yours, whether or not it was necessary) Not only am I curious, but that's what the original poster needs.

[edited by: Xapti at 4:51 am (utc) on Feb. 4, 2008]


Featured Threads

Hot Threads This Week

Hot Threads This Month