how to vertically align elements in td tag
Read about vertical-align in table cells here
vertical-align:middle
vertical-align:top
vertical-align:bottom
http://phrogz.net/css/vertical-align/
Be careful when there are several elements in the same <TD>
, the vertical alignment no longer works because the alignment is made on the different elements but together!
For the different elements to be vertically centered, they must be separated into a new <table>
with different columns!
For example, to align an image with a <span>
:
Thanks to all for your help. I found the answer myself. This is the new code. Only the td tag has changed to add an additional attribute align=center. This will align all element within td tag in center.
<td align="center" style="vertical-align:top;">
<div id="div1" style="display:inline-block; horizontal-align:center; margin-top:5px;">
<a id="a_top" title="Top" class="ui-icon ui-icon-circle-triangle-n" style="border:0px;"></a>
</div>
<div id="slider_y" style="height:240px; width:6px; horizontal-align:center; margin-top:10px; "></div>
<div id="div2" style="display:inline-block;horizontal-align:center;margin-top:10px;">
<a id="a_bottom" title="Bottom" class="ui-icon ui-icon-circle-triangle-s" style="border:0px;"></a>
</div>
</td>