基线和顶部之间的表格单元格垂直对齐差异
[英]Table cell vertical-alignment difference between baseline and top
问题描述
I played around with different values of vertical-alignment in table-cells and found out the vertical-align:top and vertical-align:baseline behaves the same.
我在表格单元格中使用了不同的垂直对齐值，发现垂直对齐：顶部和垂直对齐：基线的行为相同。 Here is an example.这是一个例子。
<!DOCTYPE html>
<style>
table, td, th {
border: 1px solid black;
}
td#top {
height: 50px;
vertical-align: top;
}
td#baseline {
height: 50px;
vertical-align: baseline;
}
</style>
<body>
<table>
<tr>
<td id="top">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
<td id="top">Griffin</td>
<td id="top">$100</td>
</tr>
<tr>
<td id="baseline">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
<td id="baseline">Griffin</td>
<td id="baseline">$150</td>
</tr>
</table>
</body>
http://jsfiddle.net/d6vron9k/ Is there any case where vertical-align:baseline differs from vertical-align:top ? http://jsfiddle.net/d6vron9k/是否有任何情况下 vertical-align:baseline 与 vertical-align:top 不同？ If so could someone post an example illustrating that?如果是这样，有人可以发布一个示例来说明这一点吗？
3 个解决方案
解决方案1
5 已采纳 2015-11-16 07:20:55
Is there any case where vertical-align:baseline differs from vertical-align:top ?
Sure.当然。
table, td, th { border: 1px solid black; } td.top { height: 50px; vertical-align: top; } td.baseline { height: 50px; vertical-align: baseline; } td:first-child:first-letter { font-size: 3em; }
<!DOCTYPE html> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td class="top">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td> <td class="top">Griffin</td> <td class="top">$100</td> </tr> <tr> <td class="baseline">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td> <td class="baseline">Griffin</td> <td class="baseline">$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body>
Or see http://jsfiddle.net/d6vron9k/2 .或查看http://jsfiddle.net/d6vron9k/2 。
I just added我刚加
td:first-child:first-letter {
font-size: 3em;
}
(and changed the ids for classes, as they weren't unique.) （并更改了类的 id，因为它们不是唯一的。）
You can see that the text in the latter columns is lower in its cell for vertical-align: baseline than it is for vertical-align: top .您可以看到，后一列中的文本在vertical-align: baseline单元格中低于vertical-align: top 。
解决方案2
0 2015-11-16 07:04:33
used to vertical-align: bottom;用于vertical-align: bottom;
as like this像这样
td#baseline {
vertical-align: bottom;
}
解决方案3
0 2015-11-16 07:05:48
hope it will clear the confusion希望它能消除混乱
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.