Как вертикально выравнивать элементы в теге td

Я хочу выровнять 3 элемента в теге <td> по вертикали в центре/середине. Это те элементы, которые я хочу выровнять:

кнопка изображения (тег) верхняя стрелка изображение
слайдер jquery
кнопка изображения (тег) снизу arrow изображение

По существу, элементы существуют для вертикальной прокрутки диаграммы. Они немного несогласованы. Я хочу, чтобы все они были в центре.

Мой текущий код:

<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 должен оставаться там.

Ответ 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>

Ответ 2

Читайте о вертикальном выравнивании в ячейках таблицы здесь

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

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

Ответ 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>

Я не уверен, что полностью понимаю, но может быть, что-то вроде этого?

Ответ 4

Будьте осторожны, когда есть несколько элементов в одном и том же <TD>, вертикальное выравнивание больше не работает, потому что выравнивание выполняется по разным элементам, но вместе!

Чтобы разные элементы были вертикально центрированы, они должны быть разделены на новый <table> сразными столбцами!

Например, чтобы выровнять изображение image с <span>: