Question

我在div中居中元素时遇到了一些问题。虽然css适用于谷歌浏览器，但它无法用于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。

Answer 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>

Answer 2

可能是因为doctype检查您是否拥有有效的doctype

试

<!DOCTYPE html>

用于IE的div中心元素

2 个答案: