Menu
I have a very simple holding page I built centering a div, anchor and image. For some reason it will not center in IE8 (either mode), and I am hoping someone can tell me why. I haven't had a chance to try it in other IE browsers. I have tried this in Chrome and FF3 where it works OK.
<html> <head> <title>Welcome</title> <style> #pageContainer {width:300px;margin:0 auto;text-align:center;} #toLogo{border:none; } </style> </head> <body> <div id="pageContainer"> <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> </div> </body> </html> I said it was really simple. :)
Thank you,
Brett
716
You can't center divs with margin: 0 auto; if you have not set width to element. Add width to . top-center to make it work.
Step 1: Wrap the image in a div element. Step 2: Set the display property to "flex," which tells the browser that the div is the parent container and the image is a flex item. Step 3: Set the justify-content property to "center." Step 4: Set the width of the image to a fixed length value.
Simply add text-align center to parent div and set the child div display to inline-block. This will force our div to behave like inline element and therefore subjected text-align center.
Do you really want your page to work in quirks mode? Your HTML centers fine once I added doctype to to force standards mode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Welcome</title> <style> #pageContainer {width:300px;margin:0 auto;text-align:center;} #toLogo{border:none; } </style> </head> <body> <div id="pageContainer"> <a href="http://portal.thesit.com" id="toSite"> <img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
