Question

我有一个背景图像的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社区的诅咒。）有没有重要的理由不使用这个btw？我仍然对使用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>

Answer 1

传统上以这种方式完成块元素的水平居中：

div.inner { margin: 0 auto; }

注意：上述情况不适用于怪癖模式的IE，因此始终将DOCTYPE放在文档的顶部以强制它进入标准合规模式。

垂直居中更加繁琐。见Vertical Centering in CSS

Answer 2

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

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

Answer 3

如果您只需要使用一行文本而父div具有固定高度，请使用line-height属性。假设父高为500px，则使用CSS line-height：500px;对于文本。

Answer 4

不使用javascript（像厚盒等等，用于定位照片/字幕居中），我最接近的是：

<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>

Answer 5

如果你想获得 VERTICAL居中，我建议在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>

如果您只对 HORIZONTAL居中（无垂直）感兴趣，则只能使用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

上

html中的水平和垂直中心文本

5 个答案: