Css: text aligned to the top and bottom of the cell
Let's say I have this code:
<table> <tr> <td> <div id="top">top</div> <div id="bot">bottom</div> </td> </tr> </table> I am trying to align #top at the top of a cell and # at the bottom of CSS.
#top { vertical-align:top; } #bot { vertical-align:bottom; } The above does not seem to work - in fact, it has no effect. Here's a link to the code: http://jsfiddle.net/vKPG8/28/
Any explanation why this is happening and how it can be fixed?
vertical-align for inline elements, and div is a block element. Try position: absolute and top: 0 and bottom: 0 .
td { position: relative; width: 200px; height: 100px; border: solid 1px; } #top, #bot { position: absolute; } #top { top: 0; } #bot { bottom: 0; } Demo: http://jsbin.com/iyosac/1/edit
Read more here: http://css-tricks.com/what-is-vertical-align/
the decision made using the position: absolute is not a cross-browser compatible solution for this problem, since Firefox does not allow (and, according to the specification, it should not) allow absolute positioning in table cells or elements with the display: table-cell.
There seems to be no truly reliable way to solve this problem, although I only have a css solution that works for this case. Essentially, I am inserting a before element that is tall enough to force the bottom line of text from the bottom, since it has vertical alignment: the bottom set. This is essentially the same as installing a padding-top, so these are not very many solutions.
demo: http://jsfiddle.net/Be7BT/
td {width:200px;height:100px;border:solid 1px;} #top { display: inline-block; vertical-align:top; width: 100%; } #bot { display: inline-block; vertical-align:bottom; width: 100%; } #bot:before{ content: ''; display: inline-block; height: 100px; }