Html 如何垂直对齐td标签中的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6183017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to vertically align elements in td tag
提问by CleanBold
I want to align 3 elements in my <td>tag vertically in the center/middle. These are the elements that I want to align:
我想<td>在中心/中间垂直对齐标签中的3 个元素。这些是我想要对齐的元素：
- image button (a tag) top arrow image
- jquery slider
- image button (a tag) bottom arrow image
- 图像按钮（一个标签）顶部箭头图像
- jquery滑块
- 图像按钮（一个标签）底部箭头图像
Essentially the elements are there for vertically scrolling of a chart. They are a bit misaligned. I want them all to be in center.
本质上，这些元素用于垂直滚动图表。他们有点错位。我希望他们都在中心。
My current code is:
我目前的代码是：
<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>
I am open to removing div tag related to image buttons, but td tag should stay there.
我愿意删除与图像按钮相关的 div 标签，但 td 标签应该保留在那里。
采纳答案by CleanBold
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。这将使 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>
回答by Suresh Pattu
Read about vertical-align in table cells here
在此处阅读表格单元格中的垂直对齐
vertical-align:middle
vertical-align:top
vertical-align:bottom
回答by Colby
<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>
I'm not sure I completely understand, but maybe something like this?
我不确定我是否完全理解，但也许是这样的？
回答by A. Morel
Be carefulwhen there are several elementsin the same <TD>, the vertical alignment no longer works because the alignment is made on the different elements but together!
要小心，当有几个元素在同一个<TD>时，垂直对齐方式不再有效，因为定位上的不同元素制成，但在一起！
For the different elementsto be vertically centered, they must be separatedinto a new <table>with different columns!
对于不同的元素进行垂直居中，它们必须被分离到一个新的不同的列！<table>
For example, to alignan imagewith a <span>:
例如，要对齐的图像用<span>：
