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

【问题标题】：how to vertically align elements in td tag如何垂直对齐td标签中的元素
【发布时间】：2011-09-05 04:43:15
【问题描述】：

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

图像按钮（标签）顶部箭头图像
jQuery 滑块
图像按钮（一个标签）底部箭头图像

基本上，这些元素用于垂直滚动图表。它们有点错位。我希望他们都处于中心位置。

我当前的代码是：

<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 标签应该保留在那里。

【问题讨论】：

没有horizontal-align CSS 属性。
CSS的两个对齐属性是text-align（水平）和vertical-align（垂直）
如果你能放一张你想要的图片会很有用
我找到了答案，我会在8小时后提交，因为提交自我答案的限制。我们只需要将属性 align=center 添加到主 td 标签。

标签： html css

【解决方案1】：

小心当同一个<TD>中有多个元素时，垂直对齐不再起作用，因为对齐由不同的元素组成，但在一起！

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

例如，align image 与 <span>：

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

了解表格单元格中的垂直对齐here

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：