3

Theoretically, vertical-align supposed to work inside an element with display:table-cell. It always works if you add a wrapper with display:table around. But when it has no wrapper, sometimes it will work and sometimes vertical-align will be completely ignored, it seems random. Could you please explain me what are the requirements for a table-cell to support vertical-alignment.

skyisred
  • 6,855
  • 6
  • 37
  • 54

1 Answers1

1

This is a little bit speculative, but in the absence of any examples, I'm going to take a shot in the dark. Maybe you mean something like this:

<!DOCTYPE html>
<title>Test case</title>
<style>
  .wrapper { height: 80px; width:100%; }
  .percentage .wrapper { border: 1px solid red; }
  .fixed .wrapper { border: 1px solid blue; }
  .height-cells-test { margin-bottom: 20px; }

  .as-block { display: block; }
  .as-table { display: table; }

  .cell { display:table-cell; vertical-align:middle; } 

  .percentage .cell { height: 100%; }
  .fixed .cell { height: 80px; }
</style>
<div class="percentage height-cells-test"> 
    <div class="wrapper as-block">
        <div class="cell">
            test percentage height of cell in block
        </div>
    </div>
    <div class="wrapper as-table">
        <div class="cell">
            test percentage height of cell in table
        </div>
    </div>
</div>
<div class="fixed height-cells-test">    
    <div class="wrapper as-block">
        <div class="cell">
            test fixed height of cell in block
        </div>
    </div>
    <div class="wrapper as-table">
        <div class="cell">
            test fixed height of cell in table
        </div>
    </div>
</div>

If you check this out in the jsfiddle, you'll see that of the four .wrapper blocks, the second, third and fourth blocks have their text vertically centred, the text in the first block appears at the top.

This case is when a percentage height for the cell is used in a display:block container.

To understand why this happens, see this text from the CSS 2.1 spec:

Document languages other than HTML may not contain all the elements in the CSS 2.1 table model. In these cases, the "missing" elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element. Missing elements generate anonymous objects ...

This is slightly misleading, as it starts by talking about using CSS with languages other than HTML, but what it means is using css table styling without using <table>, <tr>, <td> etc. so it applies here as well where display:table-cell is being used.

The spec goes on to give detailed rules (not reproduced here) about how these anonymous objects are created. The upshot is that in the case of the table-cell inside the block wrapper, an anonymous table and an anonymous table-row are generated around the table cell.

We can ignore the anonymous table-row, as that's not affecting the situation here.

The anonymous table matters though. This object has it's own height, and being a table is only as high as its content needs to be. When the table-cell is then told to be 100% height, that means 100% height of the anonymous table, not 100% of the height of the .wrapper.

So the table is small, and placed at the top left hand corner of the .wrapper, and the table-cell sits inside it. The vertical alignment is still happening, but inside a box that's no bigger than the text, so there's nowhere else for the text to go.

When the .wrapper block has styling of display:table, there is no need for an anonymous table object, and one isn't generated. So the table-cell is as high as the .wrapper and the vertical-align:middle can take effect across the whole of that space.

Alohci
  • 78,296
  • 16
  • 112
  • 156