CSS - 垂直对齐DIV内容

我想通过CSS垂直居中一些内容。对于我的生活，我无法弄清楚原因。有人可以告诉我为什么无论我做什么，下面的HTML中的“测试”这个词始终是顶级的？CSS - 垂直对齐DIV内容

<html> 
    <head> 
     <title>test</title> 
    </head> 

    <body> 
     <table border='0' cellpadding='0' cellspacing='0'> 
      <tr><td style='height:200px; width:300px; background-color:silver;'> 
       <div style='height:100%; width:100%; background-color:gray; text-align:center;'> 
        <div style='vertical-align:middle;'>test</div> 
       </div> 
      </td></tr> 
     </table> 
    </body> 
</html>

非常感谢您的帮助！

来源

2009-12-10 user208662

为什么是表里面？你知道表格不适合布局吗？ – BalusC 2009-12-10 14:25:00

尝试增加valign="middle"您td标签，如：

<td valign="middle" style='height:200px; width:300px; background-color:silver;'>

来源

2009-12-10 14:15:44 inkedmn

这可能适用于大多数浏览器，但它不符合标准。另一方面，表格的使用也不好。 – Martijn 2010-01-14 09:29:33

问题问如何垂直对齐'div'内容，而不是'td'内容。 – 2013-02-22 19:05:52

尝试设置样式= '垂直对齐：中间;'在父元素中。现在你的确在告诉内部的div将文本对齐到中间，但是你并没有让它伸展并占据整个页面。基本上你最终会得到一个与文本一样小的div元素。

您可以在Firefox中使用Firebug插件来调试这种CSS问题！

来源

2009-12-10 14:16:47 rui

-2

尝试使用的line-height：100px的

来源

2009-12-10 14:17:37

的快速方法垂直对齐，像你的情况，是相匹配的行高与高度。

<html> 
    <head> 
     <title>test</title> 
    </head> 
    <body> 
     <table border='0' cellpadding='0' cellspacing='0'> 
       <tr><td style='height:200px; line-height: 200px; width:300px; background-color:silver;'> 
         <div> 
          <div style="text-align: center">test</div> 
         </div> 
       </td></tr> 
     </table> 
    </body> 
</html>

来源

2009-12-10 14:17:52

因为vertical-align只是一个CSS替代的valign属性在TD，因此仅适用于display: table-cell元素（不，正确的解决方案是不改变你的DIV的DISPLAYMODE）

如果可以的话设置一个固定的高度到div，你应该能够与margin: auto 0

来源

2009-12-10 14:20:02

这种运作良好，垂直对齐：http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html

来源

2012-08-20 01:31:55 user1040259

CSS - 垂直对齐DIV内容

回答

相关问题