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

Question

我想在中心/中间垂直对齐<td>标记中的 3 个元素。 这些是我要对齐的元素：

1. 图像按钮（标签）顶部箭头图像
2. jquery slider
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 标记已更改以添加附加属性 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 2

在此处阅读有关表格单元格中的垂直对齐的信息

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

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

Answer 3

<td style="vertical-align:top;">                
  <div id="div1" style="display:inline-block; horizontal-align:center; margin-top:5px;">
    <div align="center"><a id="a_top" title="Top" class="ui-icon ui-icon-circle-triangle-n" style="border:0px;"></a>
      </div>
  </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;">
    <div align="center"><a id="a_bottom" title="Bottom" class="ui-icon ui-icon-circle-triangle-s" style="border:0px;"></a>
      </div>
  </div>
</td>

我不确定我是否完全理解，但也许是这样的？

Answer 4

请注意，当同一<TD>中有多个元素时，垂直 alignment 不再起作用，因为 alignment 是在不同的元素上制作的，但在一起！

对于要垂直居中的不同元素，必须将它们分成具有不同列的新<table> ！

例如，要将图像与<span>对齐：