如何在TD单元格内垂直对齐div文本？
[英]How do I vertically align div text inside of a td cell?
问题描述
这是一张3x3的桌子：
<html>
<body style="overflow:hidden;">
<style>
div.table_div {overflow:scroll;width:378px;height:117px;position:relative;}
table.TheTable {width:361px;height:100px;table-layout:fixed;border-collapse:collapse;border:1px solid #000000;}
td.TheTableColumnCell {font-size:16px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;border:1px solid #000000;}
</style>
<div class="table_div" id="table_div">
<table class="TheTable">
<tr id='firstTr'>
<td class="TheTableColumnCell">
<div onclick="alert('1');" style="position:absolute;font-size:16px;line-height:14px;background-color:#FFFF00;left:0px;top:4px;width:60px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 1</div>
<div onclick="alert('2');" style="position:absolute;font-size:16px;line-height:14px;background-color:#FFFF00;left:90px;top:4px;width:30px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 2</div>
<div onclick="alert('3');" style="position:absolute;font-size:16px;line-height:14px;background-color:#FFFF00;left:150px;top:4px;width:210px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 3</div>
</td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
<tr>
<td class="TheTableColumnCell">I'm</td>
<td class="TheTableColumnCell">Vertically</td>
<td class="TheTableColumnCell">Aligned Middle!</td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
</table>
</div>
</body>
</html>
如果您将该代码剪切并粘贴到html文件中，然后在浏览器中将其打开，则会看到div充当我的网格的覆盖。 这有点像“调度”控件（网格表示每个小时的块）。
让我抓狂的是，我无法使div标签内的文本在中间垂直对齐。 实际的td标签，没问题。 但是td标签中的div标签-不！
我已经在这里阅读并尝试了所有内容： http : //phrogz.net/css/vertical-align/index.html
我已经尝试过（作为div的一种样式）：填充，边距，行高等。
编辑：我认为这个网格的意图有些混乱。 我使用div标签的原因是在网格上覆盖“黄色条”。 这意味着一个td单元内部可能有多个“黄条”，或者它可以跨越多个单元。 例如，我的原始html（假设第一列是12:00 AM）在第一行中包含三个事件。 活动1：12:00 AM-12:30 AM。 事件2：12:45-1:00 AM（都在同一个单元格中）。 事件3：1：15 AM-3:00 AM（它与两个像元重叠）。 像那样的东西。 这就是div标签的原因。
7 个解决方案
解决方案1
2 已采纳 2011-12-07 21:26:23
div中是否有一行，请尝试将容器的行高设置为与容器的高度相同。
<div onclick="alert('1');" style="position:absolute;font-size:16px;line-height:24px;background-color:#FFFF00;left:0px;top:4px;width:60px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 1</div>
解决方案2
2 2011-12-07 22:00:55
解决方案3
1 2011-12-07 21:33:44
将事件添加到“ TD”而不是div不会对您有用吗？
<html>
<body style="overflow:hidden;">
<style>
div.table_div {overflow:scroll;width:378px;height:117px;position:relative;}
table.TheTable {width:361px;height:100px;table-layout:fixed;border-collapse:collapse;border:1px solid #000000;}
td.TheTableColumnCell {font-size:16px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;border:1px solid #000000;}
</style>
<div class="table_div" id="table_div">
<table class="TheTable">
<tr id='firstTr'>
<td class="TheTableColumnCell">
<span onclick="alert('1');" style="font-size:16px;line-height:14px;background-color:#FFFF00;left:0px;top:4px;width:60px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 1</span>
</td>
<td class="TheTableColumnCell">
<span onclick="alert('2');" style="font-size:16px;line-height:14px;background-color:#FFFF00;left:90px;top:4px;width:30px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 2</span>
</td>
<td class="TheTableColumnCell">
<span onclick="alert('3');" style="font-size:16px;line-height:14px;background-color:#FFFF00;left:150px;top:4px;width:210px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 3</span>
</td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
<tr>
<td class="TheTableColumnCell">I'm</td>
<td class="TheTableColumnCell">Vertically</td>
<td class="TheTableColumnCell">Aligned Middle!</td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
</table>
</div>
</body>
</html>
解决方案4
1 2011-12-07 21:45:12
position：absolute使您的div脱离表格流，并使它们忽略标准的垂直对齐方式。
您可能可以通过使用span而不是div并使用position：relative而不是absolute来修复它。
像这样：
解决方案5
1 2011-12-07 21:49:40
假设您正在询问如何使div的内容垂直位于div的中心。
将line-height设置为与height相同。 现在你有line-height:14px; height:24px line-height:14px; height:24px 。
这是设置line-height:24px样子： http : //jsfiddle.net/NytYh/1/
解决方案6
0 2011-12-07 21:27:16
试试这个： vertical-align:text-top; text-align:center vertical-align:text-top; text-align:center
解决方案7
0 2011-12-07 21:29:36
我想我明白了。 rs。
您可以尝试以下代码：
<td align="center" valign="middle">
对齐定义水平align ，垂直对齐定义垂直align 。
得到它了？
问候！
如何在表格单元格内垂直对齐div？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.