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 回答