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.
That’s it now when you run this in browser you can see text is vertically aligned.
Hope you liked it..Stay tuned for more..Till then happy programming.
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.
Hope you liked it..Stay tuned for more..Till then happy programming.
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.
ReplyDeleteThat's nice thanks for share!
ReplyDelete@Dianakac - Thanks for complements!!
ReplyDelete@Aaron Watson - Don't understand what you want to say. Please be clear
ReplyDelete