Contact Us


FriendFeed FriendFeed


follow us on twitter Twitter


 Rss Feed


Favorites Add to Favorites

Thursday, July 9, 2009

Vertical align text in floating div using css

Do you know how to vertically align a text in a floating div? When a content is dynamically generated and you want to align it automatically according to it?

Today i was experimenting about this for a long time and finally i have got a solution which will work in all the browsers including ie6. There are many ways of doing it, but i would like to work the code in all the majore browsers inculding ie6.

So here is the code...

<div class="contentdiv">
<p>It works! Vertically Center Align!</p>

.contentdiv{ width: 135px; height: 84px; display: table; border:2px solid red;}
.contentdiv p{ display: table-cell; vertical-align: middle; text-align: center;}

Hack for ie:
.contentdiv p{*margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");}

According to the height you increase, the content will get vertically aligned center. My only worry is iam using expression. We must try to avoid using more expression. But it looks very simple. Fine, any other method of handle this will be a great help! Please feel free to post.

Labels: , , ,


Anonymous Anonymous said...

I tested this in IE 7 and it didn't work...

September 10, 2009 at 1:39:00 PM PDT  
Anonymous Les said...

It works in firefox and IE7

September 28, 2009 at 12:51:00 AM PDT  
Anonymous gav said...

Hey man, i tested this with the following o/s browsers and it works fine..

PC Vista Fx3.5
PC Vista IE8
PC Vista IE7
PC Vista Chrome 3
PC Vista Opera 10
PC Vista Safari 4
MAC Safari 3

October 21, 2009 at 7:14:00 PM PDT  
Blogger Madhu said...

For IE 7

*+html .contentdiv {}

April 5, 2010 at 8:50:00 PM PDT  
Anonymous Anonymous said...

Use this simple example. It shows you how to do it whether in a div or a list. And it doesn't use line heights, javascript or expressions =

May 10, 2010 at 3:20:00 AM PDT  
Anonymous Anonymous said...

Do you know how to vertically align a text in a floating div?

Where's the float?

January 21, 2014 at 8:56:00 PM PST  
Anonymous Omega softwares said...

Great - works like a charm, thank you!
Our company do Web Designing in Mumbai and Website Development at very low cost.

December 29, 2014 at 12:21:00 AM PST  
Anonymous Omega Softwares said...

Thank you for this amazing Article! have a nice day............
For more : CMS website development company and Web Designing

December 29, 2014 at 12:54:00 AM PST  
Blogger Omega software said...

This post is very helpful, edifying and in addition cool thoughts on the topic. It's very encouraging to find this site, can't wait to check out new stuff you post. CMS website development company || Web Designing || Website Development

January 7, 2015 at 11:58:00 PM PST  
Blogger Omega software said...

Nice information, many thanks to the author. It is incomprehensible to me now, but in general, the usefulness and significance is overwhelming. Thanks again and good luck. Website Development in Mumbai || CMS Website Developer || Website Maintenance in Mumbai

January 7, 2015 at 11:58:00 PM PST  
Blogger Albert Andrada said...

Really Nice Information,Thank You Very Much For Sharing.
Wordpress Development Company

May 6, 2015 at 6:59:00 AM PDT  
Anonymous Web Development India said...

This is interesting great coding technique.. Thanks

June 16, 2015 at 10:35:00 PM PDT  
Blogger Suseela Susiee said...

There are lots of information about latest technology and how to get trained in them, like this have spread around the web, but this is a unique one according to me.

SEO Company in Chennai

June 13, 2016 at 5:36:00 AM PDT  
Blogger Mansyur toha said...

Thanks for your post Tempat Tidur Anak

August 2, 2016 at 3:32:00 PM PDT  
Blogger Suseela Susiee said...

What an awesome post, I just read it from start to end. Learned something new after a long time.

SAP SD Training in Chennai

August 18, 2016 at 3:26:00 AM PDT  
Blogger Maani kamili said...

I do agree with all the ideas you have presented in your post. They’re really convincing and will certainly work. Still, the posts are very short for newbies. Could you please extend them a little from next time? Thanks for the post..

Web development company

August 24, 2016 at 11:58:00 PM PDT  
Blogger Thanu Abi said...

Thank you for having taken your time to provide us with your valuable information relating to your stay with us. This blog help me in attaining more knowledge in the right way. Thank you for your post

Best Seo Services in Chennai

August 25, 2016 at 2:52:00 AM PDT  
Blogger UMA MAHESWARI said...

This comment has been removed by the author.

September 25, 2016 at 5:41:00 AM PDT  
Blogger UMA MAHESWARI said...

Great post and informative was awesome to read, thanks for sharing this great content to my vision

September 25, 2016 at 5:43:00 AM PDT  
Blogger Tabassum M said...

I appreciate your effort for providing this useful information with us. Keep sharing such useful information with us

Mumbai web designers | website maker in Mumbai | Mumbai website developers

January 6, 2017 at 9:49:00 PM PST  
Blogger Shruti s said...

We are also providing best mobile solutions, web design and development, ecommerce solution, SEO.
Check out us here

Web Design company in Hubli | web designing in Hubli | SEO company in Hubli

May 22, 2017 at 10:47:00 PM PDT  
Blogger Patrick Co Eban said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from HTML5 CSS3 Javascript Online Training from India . or learn thru HTML5 CSS3 Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. HTML5 CSS3 Javascript Online Training from India

April 2, 2018 at 4:18:00 AM PDT  
Blogger Wonders Mind said...


Thanks for sharing a very interesting article about Vertical align text in floating div using css. This is very useful information for online blog review readers. Keep it up such a nice posting like this.

Web Design Company Bangalore

October 30, 2018 at 2:17:00 AM PDT  
Blogger مروة محمد said...

شركة رش مبيدات بالاحساء

February 4, 2019 at 12:02:00 AM PST  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home