CODEWITHSUNDEEP
css
OneMoreError
OneMoreError

Reputation: 7728

Centering elements in a div for IE

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.

Upvotes: 0

Views: 78

Answers (2)

Murali N
Murali N

Reputation: 3498

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>

Upvotes: 1

NullPoiиteя
NullPoiиteя

Reputation: 57322

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

try

<!DOCTYPE html>

Upvotes: 1

Related Questions