CODEWITHSUNDEEP
htmlcssvertical-alignmentcss-tables
Jan Mazac
Jan Mazac

Reputation: 41

Vertical alignment in table-cell together with floating div

I have the following (sample) html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>TH-Alignment</title>
    <style type="text/css">
        th {
            border: 1px solid #333;
            vertical-align: middle;
        }
        div.sb {
            float: right;
            width: 4px;
            height: 26px;
            background-color: #999;
        }
    </style>
  </head>
  <body>
    <table cellspacing="0" cellpadding="0">
        <colgroup>
            <col width="120" />
            <col width="120" />
        </colgroup>
        <thead>
            <tr>
                <th>
                    <div class="sb"></div>
                    <div>Heading 1</div>
                </th>
                <th>
                    <div>Heading 2</div>
                </th>
            </tr>
        </thead>
    </table>
  </body>
</html>

The div in the second column is vertically centered, the div in the first column not (always positioned at the top of the table-cell). Why does the floating div inside column one influence the vertical alignment of the other div within the table cell?

Thanks in advance.

Upvotes: 4

Views: 3867

Answers (1)

Zuul
Zuul

Reputation: 16269

If you expand the height for the th, you will notice that elements are still vertically aligned to the middle.

See this Fiddle Example!

The issue here is the line-height.

Since you've got more that one element on that first th, and one of those elements has a height defined, all elements are aligned to the middle of the th but between them, they are aligned to the height of their current line-height, which is not defined and being calculated either by the font-size or a parent element definition.

Since your floated element has a height of 26px, it grows down, but the element with the text as no line-height defined so it's height is equal to the font-size provided by the text inside, thus never getting to the middle of its floated sibling.

To fix this, you need to use:

line-height: 26px;

To set a line-height equal to the height of your floated element, thus aligning the text to the middle of the floated element and solving the visual aspect of the vertical alignment.

See this Fiddle Example with that working solution!

Note: One element is not affecting the other as you suspect, they just don't have enough declarations to have a coherent alignment among them!

By default text and images are aligned to the baseline, if no line-height is given, the baseline is the font-size.

Upvotes: 4

Related Questions