在 IE 的 div 中居中元素答案

【问题标题】：Centering elements in a div for IE在 IE 的 div 中居中元素
【发布时间】：2012-11-15 22:31:51
【问题描述】：

我在 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。

【问题讨论】：

什么版本的IE？您还检查了哪些其他浏览器？
在 Firefox 和 chrome 上检查 .. 对它们很好 .. 但 IE 把它弄得一团糟！！
如果它在 ff 中很好，这意味着它可能是因为 doctype
试试这个stackoverflow.com/questions/6254793/…
我正在使用这个：w3.org/TR/xhtml1-transitional.dtd">

标签： css

【解决方案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>

【讨论】：

不要把 text-align:center to h2 放到 #contactus

【解决方案2】：

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

试试

<!DOCTYPE html>

【讨论】：