如何在td单元格内垂直对齐div文本？

时间：2011-12-07 21:19:51

标签： html html-table

这是一张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>
&nbsp;</td>
<td class="TheTableColumnCell">&nbsp;</td>
<td class="TheTableColumnCell">&nbsp;</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">&nbsp;</td>
<td class="TheTableColumnCell">&nbsp;</td>
<td class="TheTableColumnCell">&nbsp;</td>
</tr>
</table>
</div>
</body>
</html>

如果您将该代码剪切并粘贴到html文件中并在浏览器中打开它，您将看到div作为我网格的叠加层。这有点像调度控件（网格代表每个小时块）。

令我疯狂的是，我无法让div标签内的文字在中间垂直对齐。实际的td标签，没问题。但是td标签内的div标签 - nope！

我已阅读并尝试了所有内容：http://phrogz.net/css/vertical-align/index.html

我尝试过（作为div的样式）：填充，边距，线高等。

编辑：我认为这个网格的意图存在一些混淆。我使用div标签的原因是在网格上覆盖“黄色条”。这意味着在一个td单元内可能存在多个“黄色条”，或者它可以跨越多个单元。例如，我的原始html（假设第一列是12:00 AM）在第一行中有三个事件。活动1：上午12:00 - 上午12:30。事件2：12：45-1：00（两个都在同一个单元格内）。事件3：上午1:15 - 凌晨3:00（并且它重叠了两个单元格）。类似的东西。这就是div标签的原因。

Schedule Control

7 个答案:

答案 0 :(得分：2)

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>

答案 1 :(得分：2)

这是一个经过精心清理的代码版本，我认为这就是您正在寻找的答案。

修改

http://jsfiddle.net/FXFF8/24/

enter image description here

答案 2 :(得分：1)

将事件添加到“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">&nbsp;</td>
<td class="TheTableColumnCell">&nbsp;</td>
<td class="TheTableColumnCell">&nbsp;</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">&nbsp;</td>
<td class="TheTableColumnCell">&nbsp;</td>
<td class="TheTableColumnCell">&nbsp;</td>
</tr>
</table>
</div>
</body>
</html>

答案 3 :(得分：1)

position：absolute将你的div从表的流中取出，并使它们忽略标准的vertical-align。

您可以通过使用跨度而不是div来修复它，并使用position：relative而不是absolute。

这样的事情：

http://jsfiddle.net/3s4VE/

答案 4 :(得分：1)

假设您正在询问如何将div的内容垂直居中在div中。

将line-height设置为与height相同。现在你有line-height:14px; height:24px。

如果您设置line-height:24px：http://jsfiddle.net/NytYh/1/

，就会出现以下情况

enter image description here

答案 5 :(得分：0)

试试这个：vertical-align:text-top; text-align:center

http://jsfiddle.net/UxZr3/2/

答案 6 :(得分：0)

我想我明白了。 RS。

你可以试试这段代码：

<td align="center" valign="middle">

align定义水平对齐，Valign定义垂直对齐。

得到了吗？

问候！

相关问题
最新问题