Question

我有一个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＆amp;保证金 - 自动将div转为中心。这适用于Mozilla＆amp;不在资源管理器中解决方法是什么。

Answer 1

您需要将自动添加到您的保证金

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

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

Answer 2

margin:0px auto;

你必须指定一个宽度

Answer 3

#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用于垂直对齐。如果你把它们全部放在一起，你的页面就会完全居中。

Answer 4

对于Internet Explorer，您可以在您的身体上设置文本对齐中心，并在div text-align：left上设置。

应该这样做; - ）

Answer 5

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

但与往常一样，探险家不遵守规则。要使其居中于块，您必须将父元素的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>

Answer 6

这就是你要找的东西吗？

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

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

6 个答案: