center images

Forum Moderators: not2easy

Message Too Old, No Replies

center images

css problems centering images

brancook

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

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>
</div>

css:

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

Xapti

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

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

brancook

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

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.

PokeTech

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

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

brancook

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

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.

swa66

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

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):

index.html:
--->8---

<?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">
 <head>
 <title>example</title>
 <link rel="stylesheet" type="text/css" href="css.css" />
 <!--[if IE]>
 <link rel="stylesheet" type="text/css" href="ie.css" />
 <![endif]-->
 </head>
 <body>
 <h1>Welcome</h1>
 <img id="mainlogo" src="logo.gif" alt="LOGO" />
 </body>
</html>

---8<---

css.css:
--->8---

* {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; }

---8<---

ie.css:
--->8---

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

---8<---

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.

Xapti

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

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]

center images

css problems centering images

brancook

Xapti

brancook

PokeTech

brancook

swa66

Xapti

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week