schoeberl schoeberl - 2 months ago 8
CSS Question

CSS vertical alignment table method has no effect

I need to vertically align a box with CSS without using

display: inline-block
. As I don't know the height of my elements I used the way here described (CSS Table Method).

<div style="background-color: black">
<div style="background-color: aqua; display: table; margin: auto;">
<div style="background-color: aliceblue; width: 200px; float: left; display: table-cell; vertical-align: middle;">
<p>A</p>
<p>A</p>
<p>A</p>
</div>
<div style="background-color: green; height: 20px; width: 100px; float: left; display: table-cell; vertical-align: middle;"></div>
<div style="background-color: aliceblue; width: 250px; float: left; display: table-cell; vertical-align: middle;">
<p>B</p>
<p>B</p>
<p>B</p>
<p>B</p>
</div>
</div>
</div>


However, the vertical alignment on this test page has no effect at all. According to the computed CSS of these divs the display value is set to block! How can I make these divs appear in the middle?

Answer

erase the float:left from the DIVs - display:table-cell and float:left together makes no sense

Codepen: http://codepen.io/anon/pen/ORrNdW

ADDITION AFTER COMMENT:

Like this: codepen.io/anon/pen/NRxALO ? I inserted /nested another DIV in each table-cell that contains the smaller elements, and assigned the background-color to the table element itself.