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;
}

 

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x