Html 如何在td单元格内垂直对齐div文本？
这是一张3x3表格：Html 如何在td单元格内垂直对齐div文本？,html,html-table,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 so
<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>
如果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>
如果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>
我想我明白了。卢比 您可以尝试以下代码：
<td align="center" valign="middle">
问候 我想我明白了。卢比 您可以尝试以下代码：
<td align="center" valign="middle">
问候 将事件添加到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>
将事件添加到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>
position:absolute将div从表的流程中移除，并使它们忽略标准的垂直对齐 您可以通过使用跨距而不是div，以及使用position:relative而不是absolute来修复它 大概是这样的：
position:absolute将div从表的流程中移除，并使它们忽略标准的垂直对齐 您可以通过使用跨距而不是div，以及使用position:relative而不是absolute来修复它 大概是这样的： 假设您正在询问如何使div的内容在div内垂直居中 将线条高度设置为与高度相同。现在你有线的高度：14px；高度：24px 以下是设置行高：24px时的情况： 假设您正在询问如何使div的内容在div内垂直居中 将线条高度设置为与高度相同。现在你有线的高度：14px；高度：24px 以下是设置行高：24px时的情况：
这是一个经过大幅清理的代码版本，我认为这就是您要寻找的答案 编辑：
这是一个经过大幅清理的代码版本，我认为这就是您要寻找的答案 编辑：
您是否尝试过将div标记显示为表格单元格？显示：表格单元格；小提琴：re：显示：表格单元格；对我确实试过了。好的建议，不过，我认为这可能会工作太多！！您能否澄清一下：您在获取黄色div本身、单元格中垂直居中的黄色背景或div中垂直居中的文本时是否遇到问题？如果是后者，请参阅我的答案。div中的文本不是div本身。让我看看你的答案。你试过把div标签显示为表格单元格吗？显示：表格单元格；小提琴：re：显示：表格单元格；对我确实试过了。好的建议，不过，我认为这可能会工作太多！！您能否澄清一下：您在获取黄色div本身、单元格中垂直居中的黄色背景或div中垂直居中的文本时是否遇到问题？如果是后者，请参阅我的答案。div中的文本不是div本身。让我看看你的答案。我实际上想要的是div和任何td的-因为这是td的默认值：垂直对齐：中间；文本对齐：左对齐；垂直对齐：中间对div文本没有任何作用。实际上，我想要的是div和任何td，因为这是td的默认值：垂直对齐：中间；文本对齐：左对齐；垂直对齐：中间对齐对div文本没有任何作用。valign不是不推荐使用吗？不管怎样，将这些属性应用于td标记没有任何帮助。这是我关心的div文本。这就是为什么这个很棘手的原因。td单元格内垂直对齐的div文本
默认情况下，e td cell已经实现了我想要的功能：垂直对齐到中间，水平对齐到leftvalign=middle是默认值，因此这不会造成任何差异。不建议使用valign？不管怎样，将这些属性应用于td标记没有任何帮助。这是我关心的div文本。这就是为什么这个很棘手的原因。垂直对齐td单元格内的div文本默认情况下，td单元格已经执行了我想要的操作：垂直对齐到中间，水平对齐到leftvalign=middle是默认值，因此这不会产生任何差异。我不确定您是否理解我的意图。可能有多个事件，因此onclick位于一个单元格内。谢谢你的努力。哦，好的，但问题是每个分区应该在td内还是那个部分对你来说不重要？如果我能把它覆盖在黄色上，我会尝试任何标签和它的位置。尝试我使用了跨距，拿出位置，并将每个跨距放在自己的td内。嘿，安德烈斯，我投了你一票。我真的很感谢你的时间和努力。谢谢我用了Matt C和Phrogz的线条高度解决方案。我不确定你是否明白我在做什么。可能有多个事件，因此onclick位于一个单元格内。谢谢你的努力。哦，好的，但问题是每个分区应该在td内还是那个部分对你来说不重要？如果我能把它覆盖在黄色上，我会尝试任何标签和它的位置。尝试我使用了跨距，拿出位置，并将每个跨距放在自己的td内。嘿，安德烈斯，我投了你一票。我真的很感谢你的时间和努力。谢谢我用了Matt C和Phrogz的线条高度解决方案。很有趣。而且看起来很干净。但是，这会动态地改变我要做的事情。打开outlook，在同一小时内创建多个约会，然后查看时间表控件。我的每个td单元代表一个“小时”。div标记表示事件\约会。一个单元格中可能有多个标记。我原来的html在单元格1,1中有两个事件，现在用新的html更改了。第二个事件现在位于第1行第2列。谢谢你的努力。@Phorgz，我能问一下这是一件多么恐怖的事吗？我的意思是，是的，我可以用他的版本来清理它，但它彻底改变了我所要做的。所以它打破了我的初衷。@justlook我之前修改了我的评论，删除了“恐怖”一词。这是不恰当的苛刻。但是，由于您提出了要求，您的原始标记将代码逻辑与标记相混合，并且。虽然TerryR的更改最终并不是您需要的，但结果是HTML和CSS明显减少；这是你在最终结果中应该努力争取的东西。@Phorgz；噢！真棒的建议。我喜欢。特别是多余的CSS类建议。不过，请原谅我的div标签。我还在开发中，所以我还没有将它的样式移动到样式标记。更新了我的答案，使其在保持干净的同时不破坏原始代码。理想情况下，位置和宽度将以编程方式完成，但您得到了这个想法。而且看起来很干净。但是，这会动态地改变我要做的事情。打开outlook，在同一小时内创建多个约会，然后查看时间表控件。我的每个td单元代表一个“小时”。div标记表示事件\约会。一个单元格中可能有多个标记。我原来的html在单元格1,1中有两个事件，现在用新的html更改了。第二个事件现在位于第1行第2列。谢谢你的努力。@Phorgz，我能问一下这是一件多么恐怖的事吗？我的意思是，是的，我可以用他的版本来清理它，但它彻底改变了我所要做的。所以它打破了我的初衷。@justlook我之前修改了我的评论，删除了“恐怖”一词。这是不恰当的苛刻。但是，由于您提出了要求，您的原始标记将代码逻辑与标记相混合，并且。虽然TerryR的更改最终并不是您需要的，但结果是HTML和CSS明显减少；这是你在最终结果中应该努力争取的东西。@Phorgz；噢！真棒的建议。我喜欢。特别是多余的CSS类建议。不过，请原谅我的div标签。我还在开发中，所以我还没有将它的样式移动到样式标记。更新了我的答案，使其在保持干净的同时不破坏原始代码。理想情况下，位置和宽度将以编程方式完成，但您得到的想法是：行高度等于工作的div的高度。或者它似乎起作用了。谢谢我给出的示例代码模拟了32像素的td单元高度。它看起来居中，当单元格高度大于32时，它看起来居中。奇怪的是，当我选择16作为td单元高度时，我想它看起来并不是垂直居中的。但我可能在这里吹毛求疵。你正在跑步，很可能会被选中。我只是想看看还有什么其他答案。日分
t、 再次感谢！我真的很感激。我现在就投票。@justlookfwiw，这被描述为方法2中的@佛洛兹，我知道不过，我只选择了字体大小的行高，而不是超过。我不是世界上最爱HTML的人。这里是C++/C程序员。@Matt C。你很快，我同意你的解决方案。所以，绿色复选标记为您！特别感谢Phrogz和TerryR-好东西。线条高度等于潜水舱的高度。或者它似乎起作用了。谢谢我给出的示例代码模拟了32像素的td单元高度。它看起来居中，当单元格高度大于32时，它看起来居中。奇怪的是，当我选择16作为td单元高度时，我想它看起来并不是垂直居中的。但我可能在这里吹毛求疵。你正在跑步，很可能会被选中。我只是想看看还有什么其他答案。但是，再次感谢！我真的很感激。我现在就投票。@justlookfwiw，这被描述为方法2中的@佛洛兹，我知道不过，我只选择了字体大小的行高，而不是超过。我不是世界上最爱HTML的人。这里是C++/C程序员。@Matt C。你很快，我同意你的解决方案。所以，绿色复选标记为您！还要特别感谢弗罗兹和泰瑞-好东西。这就是马特C的建议。谢谢。我还是想听听你对这件事的看法。我对更干净的代码很感兴趣。你选的那个家伙实际上违背了我的意图。所以我不能像他那样把它清理干净。不过，你会因为帮忙而获得一张赞成票。谢谢@只是看看而已，不客气。至于是什么让我把当前的代码称为“恐怖/混乱”，我在另一条评论中回答。下面是我将如何清理您的特定标记：祝您在CSS/HTML方面好运！刚到家。非常好。谢谢就像我提到的，我接触HTML可能已经至少10年了。你帮了大忙，这就是马特·C的建议。谢谢。我还是想听听你对这件事的看法。我对更干净的代码很感兴趣。你选的那个家伙实际上违背了我的意图。所以我不能像他那样把它清理干净。不过，你会因为帮忙而获得一张赞成票。谢谢@只是看看而已，不客气。至于是什么让我把当前的代码称为“恐怖/混乱”，我在另一条评论中回答。下面是我将如何清理您的特定标记：祝您在CSS/HTML方面好运！刚到家。非常好。谢谢就像我提到的，我接触HTML可能已经至少10年了。你真的帮了大忙。我真的希望投票能让你得到一些分数。我不完全确定如何获得声誉的stackoverflow规则。我采用了线高度的解决方案，但绝对不会忘记跨度的问题。非常感谢你的意见，非常感谢。我真的希望投票能让你得到一些分数。我不完全确定如何获得声誉的stackoverflow规则。我采用了线高度的解决方案，但绝对不会忘记跨度的问题。非常感谢您的投入，非常感谢。