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...
HTML:
<div class="contentdiv">
<p>It works! Vertically Center Align!</p>
</div>
CSS:
.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.
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...
HTML:
<div class="contentdiv">
<p>It works! Vertically Center Align!</p>
</div>
CSS:
.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: CSS, div min height, float, vertical align text
22 Comments:
I tested this in IE 7 and it didn't work...
It works in firefox and IE7
Thanks
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
PC XP IE6
PC XP Fx2
MAC Fx2
MAC Safari 3
For IE 7
*+html .contentdiv {}
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 = http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html
Do you know how to vertically align a text in a floating div?
Where's the float?
Great - works like a charm, thank you!
Our company do Web Designing in Mumbai and Website Development at very low cost.
Thank you for this amazing Article! have a nice day............
For more : CMS website development company and Web Designing
This is interesting great coding technique.. Thanks
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
Thanks for your post Tempat Tidur Anak
What an awesome post, I just read it from start to end. Learned something new after a long time.
SAP SD Training in Chennai
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
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
This comment has been removed by the author.
Great post and informative blog.it was awesome to read, thanks for sharing this great content to my vision
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
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
Hi,
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.
Regards,
WondersMind,
Web Design Company Bangalore
Thanks for sharing this article ...It's Very nice information and very helpful...
Are you looking for Mumbai website developers. Don't worry we are here to help you out with our best capabilities.
Our main aim is to provide incredible and world-class services to our clients.
Digital transformation company
hire android developers
iOS app development companies
Fantastic article! If you're aiming to create compelling and engaging content, consider partnering with a video marketing agency Dubai. Their expertise in video production and marketing can help you connect with your audience and boost your brand's visibility. Highly recommend checking out their services for top-notch video marketing solutions!
Post a Comment
Subscribe to Post Comments [Atom]
<< Home