CODEWITHSUNDEEP
htmlcssalignment
michaelmcgurk
michaelmcgurk

Reputation: 6509

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>

Upvotes: 2

Views: 509

Answers (3)

user1685883
user1685883

Reputation: 74

Use this css

body{
    margin:0 auto;
}
.parent {
    background:blue;
    float:left;
    width:100%
}

.parent div 
{
    text-align:center;
    width:50%;
    margin:0 auto;
}

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

Upvotes: 0

lmgonzalves
lmgonzalves

Reputation: 6588

Modern flexbox solution (IE10+ and all modern browsers supported):

.parent {
    display: flex;
    align-items: center;
}

DEMO

You can learn more about flexbox with this excelent article :)

Upvotes: 2

potashin
potashin

Reputation: 44601

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>

Upvotes: 4

Related Questions