0

div内の要素を中央に配置するのに少し問題があります。css は Google Chrome では正常に機能しますが、Internet Explorer では失敗します。

id="contactus" の div があり、ヘッダー、パラ、画像など、div 内のすべてを中央に配置したいとします。より具体的には、ヘッダーを中央に配置し、その後に div の幅の 80% にまたがる下線を中央揃えで配置したいと考えています。このことを考慮：

<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;
}

ヘッダーと下線は IE では左揃えのままですが、Chrome では中央揃えになります。どうすればそれを修正できますか?

注: 私は IE 用に別の CSS スタイルシートを使用しているため、答えは IE のみに固有のものである可能性があります。

4

2 に答える 2

1

このように変更

#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>
于 2012-11-28T06:13:49.980 に答える
1

doctype が原因である可能性があります。有効な doctype があることを確認してください

試す

<!DOCTYPE html>
于 2012-11-28T06:14:07.953 に答える