How do I vertically align div text inside of a td cell?
Question
Here is a 3x3 table:
<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>
If you cut-and-paste that code into an html file and open it in your browser, you will see that the div's act as an overlay onto my grid. This is sort-of like a Scheduling control (the grid represents each hour block).
The thing that's driving me crazy is that the I can't get the text inside the div tags to become vertically aligned in the middle. The actual td tags, no problem. But the div tags inside the td tag - nope!
I've read and tried everything here: http://phrogz.net/css/vertical-align/index.html
I've tried (as a style for the div): padding, margins, line-heights, etc.
EDIT: I think there is some confusion on the intent of this grid. The reason I use the div tags is to overlay "the yellow bar" over the grid. That means there could be multiple "yellow bars" inside of one td cell or it can span multiple cells. For example, my original html (assuming the first column is 12:00 AM) has three events in that first row. Event 1: 12:00 AM - 12:30 AM. Event 2: 12:45 - 1:00 AM (both in the same cell). Event 3: 1:15 AM - 3:00 AM (and it has overlapped two cells). Stuff like that. That's why the div tags.
7 answers
solution1
2 ACCPTED 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>
solution2
2 2011-12-07 22:00:55
Here's a dramatically cleaned up version of your code with what I think is the answer you're looking for.
Edit:
solution3
1 2011-12-07 21:33:44
adding the event to the "TD" instead of div's wouldn't work for you?
<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>
solution4
1 2011-12-07 21:45:12
The position:absolute takes your divs out of the flow of the table, and makes them ignore the standard vertical-align.
You might be able to fixed it by using spans instead of divs, and using position:relative instead of absolute.
Something like this:
solution5
1 2011-12-07 21:49:40
Assuming you are asking how to get the content of the divs vertically centered within the divs.
Set the line-height to be the same as the height . Right now you have line-height:14px; height:24px line-height:14px; height:24px .
Here's what it looks like if you set line-height:24px : http://jsfiddle.net/NytYh/1/
solution6
0 2011-12-07 21:27:16
Try this: vertical-align:text-top; text-align:center vertical-align:text-top; text-align:center
solution7
0 2011-12-07 21:29:36
I guess that I understood. rs.
you can try this code:
<td align="center" valign="middle">
The align define the horizontal alignement and the Valign define vertical one.
got it?
regards!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.