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 also I have set vertical-align set 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.