Centering elements in a div for IE

Question

I have a little problem in centering elements inside a div. Although the css works fine for Google Chrome, it fails for Internet Explorer.

Say I have a div with id="contactus" and I want everything inside the div to be centred, whether it be a header, para or images. More specifically, I want a header to be centred, which is followed by an underline spanning over the 80% of the width in the div, with centre alignment. Consider this:

<div id="contactus">
  <h2>CONTACTS</h2>
</div>

#contactus {
    margin-top: 20px;
    height: 308px; /*2px for the border on both sides*/
    width: 248px; /*2px for the border on both sides*/
    background-color: #F0F0F0;
    border: 1px solid #A9A9A9;
}

#contactus h2 {
    margin:0 auto 0 auto;
    text-align: center;
    font-family:arial,sans-serif;
    padding-top: 10px;
    /*this is for the underline after the heading*/
    width:80%;
    border-bottom:1px solid gray;
}

The header and the underline remain left aligned in IE, but centre aligned in Chrome. How can I rectify that ?

Note: I am using a separate css stylesheet for IE, so the answer may be specific to IE only.

Checked on firefox, chrome.. wrks good on them.. but IE creates a mess of it !! — OneMoreError, Nov 28 '12 at 06:14
if its good in ff,ch it mean its probably because of doctype — NullPoiиteя, Nov 28 '12 at 06:15
try this http://stackoverflow.com/questions/6254793/center-a-h1-tag-inside-a-div — jsteinmann, Nov 28 '12 at 06:15
I am using this: <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// EN//" "http://www.w3.org/TR/xhtml1-transitional.dtd"> — OneMoreError, Nov 28 '12 at 06:17
Just add `position: relative` to the `h2` tag and you should be fine. — dxc, Nov 28 '12 at 06:24

Murali N · Answer 1 · 2012-11-28T06:19:53.183

1

change like this

#contactus {
    text-align:center;
    margin-top: 20px;
    height: 308px; /*2px for the border on both sides*/
    width: 248px; /*2px for the border on both sides*/
    background-color: #F0F0F0;
    border: 1px solid #A9A9A9;
}
    <div id="contactus" align="center">
      <h2>CONTACTS</h2>
    </div>

edited Nov 28 '12 at 06:19

answered Nov 28 '12 at 06:13

Murali N

3,451
4
27
38

don't put text-align:center to h2 put it in #contactus – Murali N Nov 28 '12 at 06:20

score 1 · Accepted Answer · answered Nov 28 '12 at 06:14

1

it might be because of doctype Check that you have a valid doctype

try

<!DOCTYPE html>

answered Nov 28 '12 at 06:14

NullPoiиteя

56,591
22
125
143

Centering elements in a div for IE

2 Answers2