All geek questions in one place

Margin: 0 auto does not work only in IE

I am trying to center a div #logo_alt containing an image using margin: 40px auto 0px auto; .

Problem:. In Chrome, this looks great, but in IE this img div is aligned to the left of the parent #header_organizer container. I just can’t understand why this is happening, and how it can be fixed in IE! Any help is much appreciated :)

HTML

 <div id="header_organizer"> <div id="user_bar">...</div> <div id="user_bar_menu">...</div> <div id="logo_alt"> <!-- <<<<< We are centering this div! --> <img src="logo.png" \> </div> </div>

CSS

 #header_organizer { width: 100%; height: 180px; background: black url(../images/template/header.png); float: left; position: relative; z-index: 1000; } #logo_alt { width: 256px; height: 55px; margin: 40px auto 0px auto; } #user_bar { height: 30px; color: #CCC; font-size: 13px; margin-right: 10px; padding: 0px 5px; float: right; cursor: pointer; position: relative; z-index: 3000; } #user_bar_menu { width: 200px; height: 165px; background: white; border: 1px solid #BEBEBE; float: right; position: absolute; top: 30px; right: 10px; -moz-box-shadow: -1px 1px 1px rgba(0,0,0,.2); -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2); box-shadow: 0 2px 4px rgba(0,0,0,.2); display: none; z-index: 1000; border-image: initial; }
+4
source share
2 answers

The HTML file begins with <html xmlns="http://www.w3.org/1999/xhtml"> .

Well, there is your problem. You need to provide your document with an XHTML doctype declaration, since your root element has an xmlns attribute. Then IE will work in standard mode and correctly display your margin: 0 auto style.

+10
source

First, add doctype so that IE no longer slips into quirks.

Then try this ...

 body { width: 100%; }
+1
source

Source: https://habr.com/ru/post/1395937/

More articles:


All Articles