homepage Welcome to WebmasterWorld Guest from 54.234.147.84
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
center images
css problems centering images
brancook




msg:3563987
 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><!-- end column2 -->

css:

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

 

Xapti




msg:3564542
 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




msg:3564586
 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




msg:3564764
 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




msg:3564826
 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




msg:3564926
 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




msg:3565561
 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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved