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 <!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 (markup): Code that MUST stay in the CSS #image img {position:absolute;} Code (markup): 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
remove this <!--[if IE]><style> #image span { display: inline-block; height: 100%; } </style><![endif]--> and tell me if worked. -josh
I have no idea what you are asking. A simple way to align something vertical without the use of css is to use a table structure in the HTML markup with vertical align set to middle. Or just put this in the image tag: align="middle"