如何垂直对齐td标签中的元素

Question

我想<td>在中间/中间垂直对齐标签中的3个元素.这些是我想要对齐的元素:

1. 图像按钮(标签)顶部箭头图像
2. jquery滑块
3. 图像按钮(标签)底部箭头图像

基本上,元素用于垂直滚动图表.他们有点错位.我希望他们都在中心.

我目前的代码是:

<td 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>

我愿意删除与图像按钮相关的div标签,但是td标签应该保留在那里.

Answer 1

要小心，当有几个元素在同一个<TD>时，垂直对齐方式不再有效，因为定位上的不同元素制成，但在一起！

对于不同的元素进行垂直居中，它们必须被分离到一个新的不同的列！<table>

例如，要对齐的图像用<span>：

Answer 2

感谢大家的帮助.我自己找到了答案.这是新代码.只有td标记已更改为添加其他属性align = center.这将对齐td标签中的所有元素.

<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>

Answer 3

在这里阅读表格单元格中的垂直对齐

vertical-align:middle
vertical-align:top
vertical-align:bottom

http://phrogz.net/css/vertical-align/