cesarcesar Posted August 11, 2008 Share Posted August 11, 2008 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 that MUST stay in the CSS #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 Quote Link to comment Share on other sites More sharing options...
dropfaith Posted August 12, 2008 Share Posted August 12, 2008 im not sure it will work on content but to center divs i use margin:0 auto other options if you had the chance without your link posted i cant tell use background-image posistions and use it as a background Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted August 12, 2008 Share Posted August 12, 2008 HOLY COW. I just had this problem! - I was trying to center a fixed div vertically and horizontally without a know "specified" height. I'm currently on vacation in Poland so I can't get the code right at this instance, but I"ll be sure to share it with you when I come back. I remember using css hacks to make this working cross-browser. It really is a pain in the azz. IE7's poor support of table-cell is a nightmare. Although, my code works I think it won't work as good for you as it worked for me. Since you are using an image you may be able to use conditional statements and tell IE to go "left: 50%" (parent div) and then go back 50% (child div) making it centered. Do some more research... it helps. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.