Clever Geek Handbook

Vertical alignment using table method?

I am trying to vertically align using the table / table-cell method.

JSFiddle

<div class="row">
    <div class="small-6 columns valign">vertically align me</div>
    <div class="small-6 columns"><p>content</p>.....</div>
</div>

.row{
    display: table;
}

.valign{
    display: table-cell;
    vertical-align: middle;
    background: grey;
    height: 100%;
}

But it doesn't work, where am I going wrong? I suspect it has something to do with the height of the valid column. How can I get this to stretch to the height of its parent?

I should also mention in my actual code, I have the code nested deep enough into the page so it's inside the article and section tag and another div too.

+3


source to share


1 answer


In some browsers the CSS property float

does not work with display: table-cell

, so you have to set the elements float: none

to table-cell

to make them act like table cells



https://jsfiddle.net/zac926wL/5/

+3


source






More articles:


All Articles