Search code examples
htmlcsshtml-tablealignmentcenter

Align td to first element in other td of table

In my HTML code, there is a table with two columns (< td >). The first column contains a label and is centered by

vertical-align: middle !important;

The other column contains a div and a label. At the moment, the text in the label of the first column is aligned to the center of the second column. What I would like, is that the first column is aligned to the center of the div of the second column, ignoring the label. Is this possible?

Current situation:

                DIV
                DIV
Aligned here -->DIV
                LABEL
                LABEL

Desired situation:

                DIV
Aligned here -->DIV
                DIV
                LABEL
                LABEL
Solution

  • Here you go. http://jsfiddle.net/MrLister/Sh3dD/3/

    You were right about the vertical-align of a table cell not being able to have an offset value in pixels.

    Fortunately, there are other ways. The trick is to set the vertical-align of the td to top, and then to use Javascript to set the line-height of the label to the same height as the calculated height of the div.

    Hope this helps!