Tags

, , , , , ,

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