dk123 dk123 - 9 months ago 26
CSS Question

css : text aligned to top and bottom of cell

Let's say I have code like this :

<table>
<tr>
<td>
<div id="top">top</div>
<div id="bot">bottom</div>
</td>
</tr>
</table>


I'm trying to align #top to the top of the cell and #bot to the bottom through CSS.

#top { vertical-align:top; }
#bot { vertical-align:bottom; }


The above doesn't seem to work - it doesn't really seem to be having any effect at all. Here's a link to the code : http://jsfiddle.net/vKPG8/28/

Any explanations on why this is happening and how it could be fixed?

Answer Source

vertical-align is for inline elements and div is a block element. Try with 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
Check here for more info: http://css-tricks.com/what-is-vertical-align/