如何在td标签中垂直对齐元素 [英] how to vertically align elements in td tag

问题描述

我想将<td>标记中的3个元素垂直居中/居中对齐.这些是我要对齐的元素:

I want to align 3 elements in my <td> tag vertically in the center/middle. These are the elements that I want to align:

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

从本质上讲，元素在这里用于图表的垂直滚动.它们有点不对齐.我希望他们都在中心.

Essentially the elements are there for vertically scrolling of a chart. They are a bit misaligned. I want them all to be in center.

我当前的代码是:

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

I am open to removing div tag related to image buttons, but td tag should stay there.

推荐答案

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

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>

这篇关于如何在td标签中垂直对齐元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！