logo标签列表

在HTML中实现文本的水平和垂直居中

csshtml
3
我有一个带背景图片的div，需要在水平和垂直方向上居中显示。除此之外，我还想显示一行文本，也要在水平和垂直方向上居中显示。
我已经成功将图片居中，但是文本没有垂直居中。我原本以为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>
使用表格来展示非表格数据会引发无障碍问题的声誉。然而，只有当表格内容在线性化时出现问题才会触发这些问题。 有一个技巧可以测试线性化：将table，tr，td {display:block;}添加到测试CSS样式表中：如果内容仍然可用/可读（尽管布局已经破坏），则您的表格序列化良好；如果它变得完全无法使用，则辅助技术将难以解析您的表格。对于单元格表格，线性化永远不会被打破，所以您应该没问题。 - Edurne Pascual
@Christophe Herreman：“顺便问一下，不使用这个的重要原因是什么？”在我看来，除了为了解决问题而自我满足之外，没有任何重要的理由不在这种情况下使用表格。对于这个特定的任务，使用表格甚至可能比使用CSS更具有跨浏览器的解决方案。 - Marco Demaio
@Marco Demaio 有一个重要的原因。对于那些视力受损并使用屏幕阅读器的人来说，它不太易于访问。 - ghoppe
5个回答
4

传统上，块元素的水平居中通常是通过以下方式实现：

div.inner { margin: 0 auto; }

注意: 上述内容在IE的怪异模式下无法正常工作，因此请始终在文档顶部放置DOCTYPE以将其强制转换为符合标准的模式。

垂直居中要麻烦得多。请参见CSS中的垂直居中解决方案

内部div必须指定特定的宽度以获得居中效果，例如“width：300px;” - Marco Demaio
2
2
“正确”的方法取决于你将要有多少文本。如果你知道那里会有什么，那么就变得容易许多。 - Blair McMillan
我只有一行文本要显示。 - Christophe Herreman
1
如果您只能使用一行文本且父级div具有固定高度，请使用line-height属性。假设父级高度为500px，则使用CSS line-height: 500px;来设置文本。
0

如果不使用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>
0
如果您想要实现垂直居中，我建议在 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上

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接