CODEWITHSUNDEEP
htmlcss
CleanBold
CleanBold

Reputation: 1592

how to vertically align elements in td tag

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. image button (a tag) top arrow image
  2. jquery slider
  3. image button (a tag) bottom arrow image

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.

Upvotes: 30

Views: 104203

Answers (5)

Dfr
Dfr

Reputation: 4175

This code also does the trick:

<td style="display: flex; align-items: center">

Upvotes: 0

A. Morel
A. Morel

Reputation: 10344

Be careful when there are several elements in the same <TD>, the vertical alignment no longer works because the alignment is made on the different elements but together!

For the different elements to be vertically centered, they must be separated into a new <table> with different columns!

For example, to align an image with a <span>:

enter image description here

Upvotes: 21

CleanBold
CleanBold

Reputation: 1592

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>

Upvotes: 15

Suresh Pattu
Suresh Pattu

Reputation: 6209

Read about vertical-align in table cells here 

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

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

Upvotes: 33

Colby
Colby

Reputation: 296

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

Upvotes: 4

Related Questions