html中居中对齐的解决方案是什么？答案

【问题标题】：What is solution for center alignment in html?html中居中对齐的解决方案是什么？
【发布时间】：2011-04-01 12:34:58
【问题描述】：

我有一个 html 页面：

<html>
<head>
<title>
All Time Set Window
</title>
</head>
<body>
<div align="center" style="width:1000px; height:100%; margin-left:auto; margin-right:auto;">
    <div style="width:100%; height:20%; background-color:#F8E0E0; float:top;">
        <div align="center">This is Header</div>
    </div>
    <div style="width:100%; height:60%; background-color:#F5F6CE;">
        <div align="center" style="width:70%; background-color:#E3F6CE; float:left;">This is Left Frame</div>
        <div align="center" style="width:30%; background-color:#E0E0F8; float:right;">This is Right Frame</div>
    </div>
    <div style="width:100%; height:20%; float:bottom; background-color:#F8E0E0;">
        <div align="center">This is Footer</div>
    </div>
</div>
</body>
</html>

我已使用 Margin-left 和 Margin-right 来自动将 div 置于中心位置。这适用于 Mozilla 而不是 Explorer。相同的解决方案是什么。

【问题讨论】：

边距：自动；不能在 Explorer 中工作，只能在 Mozilla 中工作。这就是问题所在。
但是，我再次说问题在于不能使用 IE8+。什么是相同的解决方案。我试过 1）margin-left:auto;边距右：自动； 2) 边距：自动； 3) 边距：0px 自动；还是……
如果你不强迫 IE 进入怪异模式，你会变得更好。在 HTML 的开头添加 <!DOCTYPE html>。

标签： html alignment margin

【解决方案1】：

正确的解决方案（根据规范）是您拥有的解决方案。您应该将两个边距都设置为 auto 以使块居中。

但像往常一样，探险家不按规则行事。要使其居中，您必须将父元素的text-align 设置为center。由于您可能不希望元素本身的所有文本也都居中，因此您必须通过在该元素上将 text-align 设置为 left 来再次否定该行为。

<html>
  <head>
    <title>All Time Set Window</title>
  </head>
  <body>
    <div style="text-align:center">
      <div align="center" style="width:1000px; height:100%; margin-left:auto; margin-right:auto; text-align:left">
        <div style="width:100%; height:20%; background-color:#F8E0E0; float:top;">
          <div align="center">This is Header</div>
        </div>
        <div style="width:100%; height:60%; background-color:#F5F6CE;">
          <div align="center" style="width:70%; background-color:#E3F6CE; float:left;">This is Left Frame</div>
          <div align="center" style="width:30%; background-color:#E0E0F8; float:right;">This is Right Frame</div>
        </div>
        <div style="width:100%; height:20%; float:bottom; background-color:#F8E0E0;">
          <div align="center">This is Footer</div>
        </div>
      </div>
    </div>
  </body>
</html>

【讨论】：

【解决方案2】：

您需要将自动添加到您的边距

<div style="margin:10px auto;width:100px;">stuff</div>

由于auto 属性，此 div 将居中。

【讨论】：

【解决方案3】：

margin:0px auto;

你必须指定一个宽度

【讨论】：

【解决方案4】：

#yourdiv
{
 position:absolute;
 left: 50%; 
 width: 700px;
 margin-left: -350px;
 top: 50%;
 height: 400px;
 margin-top: -200px;
}

属性left、width和margin-left用于水平对齐，top、height和margin-top用于垂直对齐。如果你把它们都放好，你就会有一个 div 完全居中在你的页面中。

【讨论】：

【解决方案5】：

对于 internet exexplorer，您可以在您的 body 和您的 div text-align: left 上设置一个 text-align center。

这应该可以解决问题 ;-)

【讨论】：

【解决方案6】：

这就是你要找的吗？

<html>
<head></head>
<body>
    <center>
        --- olalala place your content here ---
    </center>
</body>
</html>

【讨论】：