为什么我的 HTML 没有居中对齐？答案

【问题标题】：Why isn't my HTML aligning to center?为什么我的 HTML 没有居中对齐？
【发布时间】：2013-02-24 21:08:14
【问题描述】：

对不起，我承认在 HTML 方面我是个新手。但我看不出哪里出错了。我已将页面声明为居中对齐，但由于某种原因对我来说是不可见的，它实际上不会对齐！

我的代码在这里...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
<!--
body,td,th {
    font-size: 14px;
    text-shadow: inherit;
    max-width: 1000px;
    min-width: 600px;
    float: none;
    vertical-align: central;
    position: absolute;
    width: auto;
}
h1 {
    font-size: 40px;
    color: #FFF;
}
h1,h2,h3,h4,h5,h6 {
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}
h2 {
    font-size: 16px;
    color: #666;
}
h3 {
    font-size: 24px;
    color: #FFFFFF;
}
.Headertext2 {
}
h5 {
    font-size: 16px;
    color: #666;
}

h6 {
    font-size: medium;
    color: #000;
}
h4 {
    font-size: 12px;
    color: #FFF;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
    color: #999;
}
a:active {
    text-decoration: none;
}
      </style>      <title>We'll fix your Potholes!</title>
    </head><center>
 <body bgcolor="#B90D32"> <div id="container" width "1200" align="center" >
<h1>A1Jay Pothole Solutions</h1>
<h3><strong>Permanent Pothole Repair that lasts</strong></h3>
<div id="content" align="center" bgcolor="#FFFFFF"  width"600" class="content">
  <h6>Potholes are a growing problem and cause lasting damage to your vehicle. 
  We here at A1JAy Pothole Solution have the solution. We use only the best products on the market to repair potholes ensuring that the problem is fixed permanently and never returns. Our repairs are professional water tight and permanent. We replace any road markings that may be removed. We respond quickly to repair any holes, therefore stopping the damage to your vehicle.
    Our products are cold lay, fully graded to PSV-60 and all packaging is recyclable. 

    We have different rates depending on the amount of potholes you require permanently repairing, get in touch for details.

    If you have a pothole on your drive, street, place of work, car park, walkway or anywhere else, please get in contact and I will happily give you a free, no obligation quote..  </h6>
<p>&nbsp;</p>

  </div>
</div>
</body>

</html>

如果这个问题已经被问过，我很抱歉，我还在了解 Stack Overflow。在此先感谢:)。

【问题讨论】：

请把这个放到小提琴中 - jsfiddle.net

标签： html alignment center

【解决方案1】：

让我们从一个精简（有效）的解决方案开始：http://jsfiddle.net/WDTCK/1/

要点

<center> 已过时*（它也是 body 的非法父级，在您的示例中未关闭）
align=center 已过时*
使用 CSS 居中的一种简单方法是为容器元素指定宽度和 margin: 0 auto

像这样：

#container {
    margin: 0 auto;
    width: 600px;    
}

小点

总是喜欢与标记分开声明的样式
始终使用 CSS 声明样式（不推荐使用 bgcolor="#B90D32" 等属性）
确保正确使用标题。我看到 H1、H3 和 H6。标题应该代表文件的大纲；它们不应仅用于格式化。

这是一个更简洁的示例，它展示了更好的语义：http://jsfiddle.net/WDTCK/2/

^{* "obsolete and non-conforming, and [...] must not be used by authors."}

【讨论】：

哇，谢谢...我真的需要整理一下。谢谢你，也谢谢你给我看 JSFiddle。为你点赞！！
没问题。我添加了另一个示例来帮助您处理剩余的标记。另请记住，您可以使用 validator.w3.org 验证您的代码。
这对这个 giphy 不起作用：giphy.com/gifs/season-8-the-simpsons-8x21-l0G170YiUYqwSSgeI/… 除非我需要将它们提供的所有内联 css 移动到相同的外部 css 并更改我丢失的东西。

【解决方案2】：

把这个放在体内

    <div align = "center">
    <!--somecodes-->
    </div>

【讨论】：