Vertical align css – DIV align center css
CSS

Vertical align css – DIV align center css

There are some ways to do that. The easies way to do this is to make the elements behave like a tabel, as you probably know when you work with tables if you declare on "td" - "vertical-align:middle", all tds will be centered vertically, we can do the same on div structure.

Let's say we have two structure "left" and "right" which must to be centered vertically, accomplish this we must follow the following structure.

<div class="my_table">
<div class="left">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
</div>
<div class="right">
<h2>Centered Vertically</h2>
</div>
</div>

 

Even if in the left we have more text then on the right, the items will be will centerd vertically. 

CSS:

.my_table{
display:block;
width:100%;
}
.my_block .left,
.my_block .right{
display:table-cell;
width:50%;
vertical-align:middle;
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *