michaelmcgurk michaelmcgurk - 1 month ago 15
CSS Question

Vertically align contents of div

I'd like to vertically align the contents of my

div
.

So basically 'Hello test' should be in the center of the
div
, vertically.

Demonstration



.parent {
background:blue;
float:left;
width:100%
}

.parent div {
float:left;
width:50%;
}

h1 {
font-size:50px;
margin:0;
padding:0;
}

<div class="parent">

<div>
<h1>hello!</h1>
<p>test</p>
</div>

<div>
<img src="http://placehold.it/250x250" />
</div>

</div>




Answer

You can use table layout for this:

.parent {
    background:blue;
    width:100%;
    display: table;
}

.parent div {
    display:table-cell;
    vertical-align:middle;
    width:50%;
}

h1 {
    font-size:50px;
    margin:0;
    padding:0;
}
<div class="parent">

<div>
    <h1>hello!</h1>
    <p>test</p>
</div>

<div>
    <img src="http://placehold.it/250x250" />
</div>

</div>