CSS 文本对齐到单元格的顶部和底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14670842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text aligned to top and bottom of cell
提问by dk123
Let's say I have code like this :
假设我有这样的代码：
<table>
<tr>
<td>
<div id="top">top</div>
<div id="bot">bottom</div>
</td>
</tr>
</table>
I'm trying to align #top to the top of the cell and #bot to the bottom through CSS.
我正在尝试通过 CSS 将 #top 与单元格顶部对齐，并将 #bot 与底部对齐。
#top { vertical-align:top; }
#bot { vertical-align:bottom; }
The above doesn't seem to work - it doesn't really seem to be having any effect at all. Here's a link to the code : http://jsfiddle.net/vKPG8/28/
以上似乎不起作用 - 它似乎根本没有任何影响。这是代码的链接：http: //jsfiddle.net/vKPG8/28/
Any explanations on why this is happening and how it could be fixed?
关于为什么会发生这种情况以及如何解决的任何解释？
采纳答案by elclanrs
vertical-alignis for inline elements and divis a block element. Try with position: absoluteand top: 0and bottom: 0.
vertical-align用于内联元素并且div是块元素。试着用position: absolute和top: 0和bottom: 0。
td {
position: relative;
width: 200px;
height: 100px;
border: solid 1px;
}
#top, #bot { position: absolute; }
#top { top: 0; }
#bot { bottom: 0; }
Demo: http://jsbin.com/iyosac/1/edit
Check here for more info: http://css-tricks.com/what-is-vertical-align/
演示：http: //jsbin.com/iyosac/1/edit
在这里查看更多信息：http: //css-tricks.com/what-is-vertical-align/
td {
position: relative;
width: 200px;
height: 100px;
border: solid 1px;
}
#top, #bot { position: absolute; }
#top { top: 0; }
#bot { bottom: 0; }<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td>
<div id="top">top</div><br/>
<div id="bot">bottom</div>
</td>
</tr>
</table>
</body>
</html>回答by TorranceScott
the accepted solution using position: absolute is not a cross-browser compatible solution for this problem, as Firefox doesn't (and according to the spec shouldn't) allow absolute positioning in table cells or elements with display:table-cell.
使用 position: absolute 的公认解决方案不是针对此问题的跨浏览器兼容解决方案，因为 Firefox 不允许（并且根据规范不应该）允许在带有 display:table-cell 的表格单元格或元素中进行绝对定位。
There doesn't seem to be a truly reliable css-only way of solving this problem, though I do have a css-only fix that works for this case. Essentially what I did is insert a before element that is tall enough to force the bottom line of text to the bottom since it has vertical-align: bottom set. This is essentially the same as putting padding-top, so it's not much of a solution.
似乎没有真正可靠的纯 css 方法来解决这个问题，尽管我确实有一个适用于这种情况的纯 css 修复。基本上我所做的是插入一个足够高的 before 元素，以强制文本的底线到底部，因为它具有 vertical-align: bottom 设置。这本质上与放置 padding-top 相同，因此它不是一个解决方案。
demo: http://jsfiddle.net/Be7BT/
演示：http: //jsfiddle.net/Be7BT/
td {width:200px;height:100px;border:solid 1px;}
#top {
display: inline-block;
vertical-align:top;
width: 100%;
}
#bot {
display: inline-block;
vertical-align:bottom;
width: 100%;
}
#bot:before{
content: '';
display: inline-block;
height: 100px;
}
回答by Stepan Yakovenko
I have a better idea, use nested table:
我有一个更好的主意，使用嵌套表：
<table width="100px" height="100px" border=1>
<tr>
<td valign="top">top</td>
</tr>
<tr height=100%>
<td valign="bottom">bottom
</td>
</tr>
</table>
回答by NateS
The way to do this is with rowspan:
这样做的方法是rowspan：
<table><tr>
<td rowspan=2>tall<br>tall<br>tall<br>tall<br>
<td valign="top">top</td>
</tr><tr>
<td valign="bottom">bottom</td>
</tr></table>
