cómo alinear verticalmente elementos en la etiqueta td

Quiero alinear 3 elementos en mi <td> etiqueta verticalmente en el centro/medio. Estos son los elementos que quiero alinear:

1. botón de imagen (una etiqueta) imagen de flecha superior
2. deslizador jquery
3. botón de imagen (una etiqueta) imagen de flecha inferior

Esencialmente, los elementos están ahí para el desplazamiento vertical de un gráfico. Están un poco desalineados. Quiero que todos estén en el centro.

Mi código actual es:

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

Estoy abierto a eliminar la etiqueta div relacionada con los botones de imagen, pero la etiqueta td debería permanecer allí.

Lea acerca de la alineación vertical en las celdas de la tabla aquí

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

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

Gracias a todos por vuestra ayuda. Encontré la respuesta yo mismo. Este es el nuevo código. Solo la etiqueta td ha cambiado para agregar un atributo adicional align=center. Esto alineará todos los elementos dentro de la etiqueta td en el centro.

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

Ten cuidado cuando hay varios elementos en el mismo <TD>la la alineación vertical ya no funciona porque la alineación se hace sobre los diferentes elementos pero juntos!

Para el diferentes elementos ser – estar centrado verticalmenteellos deben ser separados en un nuevo <table> con diferentes columnas!

por ejemplo, a alinear un imagen con un <span>:

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

No estoy seguro de entender completamente, pero tal vez algo como esto?