Saturday, January 7, 2012

how to vertically middle align text in div-HTML tip

Recently in one of the project I have to vertical align text in div. so doing some internet search I have found there are no proper way to do it. So I thought it would be good do share this within my readers.

Here is the code do vertically align text in div.

<div style="width: 25%;border:solid 1px red;display: table;vertical-align: middle;float:left;height:100px;">
<div style="display: table-cell;vertical-align: middle;">this is a very long text this is a very long text this is a very long text this is a very long text this is a very long text this is a very long text </div>
</div>

Here in above code you can see that I have created two divs first one will serve container for other div and other div has the text which I want to align vertically in div. So in container div you can see I have given its style to display table and in child div which has the text I have given its display style to table-cell and given vertical-align property to middle. 

That’s it now when you run this in browser you can see text is vertically aligned.

HTML Tip,Div,Vertical Align

Hope you liked it..Stay tuned for more..Till then happy programming.

Shout it

kick it on DotNetKicks.com
Share:

4 comments:

  1. Never overcome through any such implementation, anyway it's good to know as there this can prove useful in future. Just didn't understand the text being repeated on, I think this might be depending on the size of the table.

    ReplyDelete
  2.  That's nice thanks for share!

    ReplyDelete
  3. @Aaron Watson - Don't understand what you want to say. Please be clear

    ReplyDelete

Your feedback is very important to me. Please provide your feedback via putting comments.

About Me
My Photo

Full Stack Developer,Blogger,Microsoft Mvp, Mentor, Life long learner, 10+ Years of Experience for JavaScript, web and Microsoft technologies. ASP.NET MVC,Web Forms,C#,AngularJs,Golang
Mvp profile
Subscribe to my blog

Enter your email address:

Follow us on facebook
Blog Archive
Total Pageviews