如何在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.