html中的水平和垂直中心文本[重复]答案

【问题标题】：Horizontal and vertical center text in html [duplicate]html中的水平和垂直中心文本[重复]
【发布时间】：2011-01-30 17:03:43
【问题描述】：

我有一个带有背景图像的 div，需要水平和垂直居中。在该图像之上，我还想显示一个 1 行文本，同时水平和垂直居中。

我设法使图像居中，但文本未垂直居中。我认为 vertical-align:middle 可以解决问题。

这是我的代码：

<div style="background: url('background.png') no-repeat center; width:100%; height:100%; text-align:center;">
   <div style="color:#ffffff; text-align: center; vertical-align:middle;" >
       Some text here.
   </div>
</div>

有什么想法吗？

解决方法：我实际上是通过使用表格来实现的。（我可能会被 HTML 社区诅咒到地狱。）有什么重要的理由不使用这个顺便说一句？不过，我仍然对使用 div 的解决方案感兴趣。

 <table width="100%" height="100%">
   <tr>
     <td align="center" style="background: url('background.png') no-repeat center; color:#ffffff;">Some text here.</td>
    </tr>
</table>

【问题讨论】：

对非表格数据的任何内容使用表格具有触发可访问性问题的声誉。但是，只有在 linearization 时表格内容中断时才会触发此类问题。有一个测试线性化的技巧：将 table, tr, td { display: block; } 添加到测试 CSS 表中：如果内容仍然可用/可读（尽管布局中断），则您的表可以序列化；如果它变得完全无法使用，辅助技术将无法解析您的表格。在单单元表的情况下，线性化永远不会被破坏，所以你应该没问题。
@Christophe Herreman：“顺便说一句，有什么重要的理由不使用这个吗？”在我看来，不，在这种情况下没有不使用表格的重要理由，除了在解决问题时自动满足。对于这个特定任务，使用表格甚至可能是一种更跨浏览器的解决方案，而不是使用 CSS。
@Marco Demaio 有一个重要的原因。对于视障人士和使用屏幕阅读器的人来说，它不太容易访问。

标签： css html

【解决方案1】：

块元素的水平居中传统上是这样完成的：

div.inner { margin: 0 auto; }

注意：以上内容不适用于 IE 的 quirks 模式，因此总是在文档顶部放置 DOCTYPE 以强制其进入标准兼容模式.

垂直居中要繁琐得多。见Vertical Centering in CSS

【讨论】：

内部 div 必须指定一定的宽度才能居中，即 "width: 300px;"

【解决方案2】：

CSS 中的 div 内容没有直接的垂直居中，但是有间接的方法来实现它。 http://phrogz.net/CSS/vertical-align/index.html

SO 中也有许多类似的问题。 How to vertically center a div for all browsers?

【讨论】：

“正确”的做法取决于您将拥有多少文本。如果你知道那里会发生什么，那就容易多了。
我只有 1 行文字要显示。

【解决方案3】：

如果你只需要使用一行文本并且父 div 具有固定的高度，请使用 line-height 属性。假设父高度是 500px 然后使用 CSS line-height: 500px;用于文本。

【讨论】：

【解决方案4】：

不使用javascript（比如thickbox之类的东西来定位照片/标题居中），我能想到的最接近的是：

<body style="height:200px; min-height:800px;">
   <div style="background: url('background.png') no-repeat center; height:100%;">
      <div style="text-align: center; position:relative; top:50%; color:#fff;">
         Some text here.
      </div>
   </div>
</body>

请注意，我必须为容器指定某种高度（在本例中为 BODY，但我认为它也可以应用于包装器 DIV）。在 Explorer 6 中，您可以将 BODY 高度设置为 100%，但在 Firefox 中这不起作用，并且可能在其他现代浏览器中也不起作用。

编辑：

找到更好的解决方案：

<style type="text/css">
    html, body {height:100%;}
</style>
</head>
<body>
    <div style="background: url('background.png') no-repeat center; height:100%;">
        <div style="text-align: center; position:relative; top:50%; color:#fff;">
            Some text here.
        </div>
    </div>
</body>

【讨论】：

【解决方案5】：

如果你想获得垂直居中，我建议在 DIV 内使用一个表格（正如 Cletus 所建议的那样，其他方式可能很乏味）。

div.centered table {margin: 0 auto;} /* no width needs to be specified for table */
div.centered table td {vertical-align: middle;} /* replace this with vertical-align: top; to disable vertical centering */


<!-- borders added only to help understanding -->
<div class="centered" style="border: 1px solid #cccccc;">
    <table style="border: 1px solid #ff0000;">
       <tbody>
          <tr><td>
             Some text here
          </td></tr>
       </tbody>
    </table> 
</div>

如果您只对水平居中（无垂直）感兴趣，则只能使用 DIV：

div.centered div {margin: 0 auto; width: 300px;} /* some width MUST be specified to center a DIV. */

<!-- borders added only to help understanding -->
<div class="centered" style="border: 1px solid #cccccc;">
    <div style="border: 1px solid #ff0000;">
       Some text here
    </div> 
</div>

您可能已经注意到，为了在 DIV 内水平对齐 DIV，您还需要为内部 DIV 指定固定宽度。这可能不是您想要做的，因此始终使用第一种解决方案（带有 TABLE 的解决方案）并简单地删除“vertical-align: middle;”可能会更容易。当您只想获得水平居中时。

我使用以下文档对此进行了测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

在 IE7、FF 3.6、SAFARI 4.0.4 上

【讨论】：