CSS Forum

**empiresolutions** · 08-11-2008, 05:10 PM

Im trying to get an image to center in a div. It works as long as one part of my CSS is commented out. The issues is the part that is breaking it, is required for another script to run that I have not added in due to its vast amount of code. Can anyone tell me a workaround.. leaving the MUST have code in place. Im willing to add anything to the code, just not remove if possible.

Full Code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<style type="text/css">
#image {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width:356px;
    height:356px;
    border:1px solid blue;
}
#image * {
    vertical-align: middle;
}
/*\*//*/
#image {
    display: block;
}
#image span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if IE]><style>
#image span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

<style type="text/css">
#image img {position:absolute;}
</style>

</head>

<body>

<div id="image"><span></span><img src="http://www.google.com/logos/olympics08_rhythm.gif"></div>

</body>
</html>

Code that MUST stay in the CSS

Code:

#image img {position:absolute;}

Just to note, the rest of the code is for the most part an exact dup of the cross-browser image center in div code here, http://www.brunildo.org/test/img_center.html

**FGU** · 08-11-2008, 06:15 PM

Not sure if this will help:
http://hostmonsterforums.com/showthread.php?t=3948

**empiresolutions** · 08-11-2008, 06:18 PM

thanks for the suggestion, but it wont work in my account.

**vangogh** · 08-11-2008, 06:21 PM

Could you set the image as a background on the div and center it that way

div#image {bacgkround: url("path-to-your-image") center;}

**LadynRed** · 08-11-2008, 06:37 PM

If you want to center that image inside the div, you can do this:
1 - add display:block to #image img
2 - add margin: 0 auto; - that will center it inside the containing div.
Then get rid of the position:absolute.