Absolute Position Fix

empiresolutions

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

Expand|Select|Wrap|Line Numbers

 
<!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

Expand|Select|Wrap|Line Numbers

#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

drhowarddrfine

Just slapped this together. You'll need to adjust it to fit it into your scheme.
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title></title>
<style type="text/css">
img{position:absolute;left:50%;margin-left:-101px}
#image{position:relative;outline:1px solid red}
</style>
</head>
<body>
<div id="image"><span></span><img src="1.gif"></div>
</body>
</html>
[/HTML]

The 'margin-left' is one-half of the width of the image.

Absolute Position Fix

re: Absolute Position Fix

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about