Vertical Align Div

12193586_1197172616965002_975453672150836497_n

Vertically Align without using display:table or table-cell

HTML

<div class="container">
    <div class="box">
          <img src="https://scontent-bru2-1.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/12108122_1197131420302455_1168152831213321670_n.jpg?oh=35afd9e93ad3cabea345a4ae52cc044e&oe=56C8CB8B" />
        <br>
        Some Text
    </div>
</div>

 

.container{     
    text-align: center;
    border: #000000 solid 2px;  
    height: 400px; 
}
.container:before{     
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;  
}
.box{ 
    vertical-align:middle; 
    display:inline-block;  
}

 

Live Demo

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s