How to Vertically Middle Align Text in a Div

“Why these CSS guys have made vertical alignment of text within a DIV so difficult? Is is possible to middle align text within a DIV element?”, this is the grouse of a number of web designers.

At time we all wonder why middle alignment of text in a div is such a non-intuitive task in web-development.It is perfectly easy to horizontally align text with the help of text-align property.

But vertical alignment also is an equally important and often needed feature. CSS standards, however, have always kept quite on this.

Well, anyway, today I am going to show you a simple workaround. It may not be useful in all cases but it certainly can come handy sometimes.

To vertically middle align text in a DIV element, we need to use height CSS property of the DIV element and line-height CSS property of the text that needs to be aligned. If we set both these properties to equal value the text will appear vertically middle aligned within the DIV element.

Let’s see an example:

Here is the CSS code that you should use:

#myDiv {
height: 70px;
background: #BBDBFB;
padding-left: 10px;
margin: 10px auto;
border: 1px solid #000;
}

#myText{
line-height: 70px;
}

<div id=”myDiv”><span id=”myText”>I’m vertically middle aligned!</span></div>

As I mentioned before, keep both the highlighted properties to same value (70px in the above example)

By default, the text piece inside a DIV remains vertically middle align with respect to its line-height. Therefore, as soon as we increase the line-height to make it equal to the height of containing element –the text begins to appear middle align with respect to the containing element as well.

Easy and logical! Hope this tip will be of use to you. You may also want to see how you can arrange two or more div elements side by side. Stay connected with TechWelkin for such useful tech tips!