title: how to vertically align elements in td tag
body: <p>I want to align 3 elements in my <code>&lt;td&gt;</code> tag vertically in the center/middle. These are the elements that I want to align:</p>
  
  <ol>
  <li>image button (a tag) top arrow image</li>
  <li>jquery slider</li>
  <li>image button (a tag) bottom arrow image</li>
  </ol>
  
  <p>Essentially the elements are there for vertically scrolling of a chart. They are a bit misaligned. I want them all to be in center.</p>
  
  <p>My current code is:</p>
  
  <pre><code>&lt;td style="vertical-align:top;"&gt;                
    &lt;div id="div1" style="display:inline-block; horizontal-align:center; margin-top:5px;"&gt;
      &lt;a id="a_top" title="Top" class="ui-icon ui-icon-circle-triangle-n" style="border:0px;"&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="slider_y" style="height:240px; width:6px; horizontal-align:center; margin-top:10px; "&gt;&lt;/div&gt;
    &lt;div id="div2" style="display:inline-block;horizontal-align:center;margin-top:10px;"&gt;
      &lt;a id="a_bottom" title="Bottom" class="ui-icon ui-icon-circle-triangle-s" style="border:0px;"&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>I am open to removing div tag related to image buttons, but td tag should stay there.</p>