CSS - 垂直对齐DIV内容 [英] CSS - Vertically Align DIV content
本文介绍了CSS - 垂直对齐DIV内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想通过CSS垂直居中一些内容。对于我的生活，我不能弄清楚原因。有人可以告诉我为什么下面的HTML中的单词测试总是顶部对齐无论我做什么？
; 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％;背景颜色：灰色text-align：center;'>
< div style ='vertical-align：middle;'> test< / div>
< / div>
< / td>< / tr>
< / table>
< / body>
< / html>
非常感谢您的帮助！
vertical-align 只是CSS替换
valign 属性在 TD ，因此只能工作在 display：table-cell 更改 DIV 的显示模式 如果您可以为div设置固定的高度，能够垂直对齐 margin：auto 0
I am trying to vertically center some content via CSS. For the life of me, I cannot figure out the cause. Can someone tell me why the word "test" in the following HTML is always top-aligned no matter what I do?
<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>
Thank you very much for your help!
解决方案
Because vertical-align is only a CSS substitute to the valign attribute in TD, and therefore only works on display: table-cell elements (and no, the proper solution is not to change the displaymode of your DIV)
If you can set a fixed height to the div, you should be able to align it vertically with margin: auto 0
这篇关于CSS - 垂直对齐DIV内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
