Vertically Align Text in CSS – A Guide

1 Flares Twitter 1 Facebook 0 Google+ 0 StumbleUpon 0 Pin It Share 0 1 Flares ×

The vertical align property of CSS is to align elements, usually images, with respect to their parent container in web designing. It is a tool used by web designers quite frequently and to great effect! However, the biggest downside is that vertical align doesn’t work with text. Unfortunately, native HTML or CSS doesn’t have a solution to this and we can accomplish this only with certain tricks.

The typical use of text being placed at the center both horizontally and vertically are text bubbles. Getting text at the centre horizontally is pretty easy with a text-align property, but getting the same result in the vertical direction isn’t as easy and intuitive as we might think and therefore, takes quite an effort!

The Problem:

If we come up with the following markup to make sure text is exactly in the middle, the result is not quite encouraging.
HTML:
       <div>
           <div>Hi there! How you doin’?</div>
       </div>
CSS:
           .a {
               width: 200px;
               height: 200px;
               background-color: #cecece;
               color: #000;
           }
           .b {
               vertical-align: middle;
           }

As you can see, a vertical-align property in the child div is not enough to get it placed exactly in the middle.

The One Line Solution:

Although not in text bubbles, we might sometimes require a vertical alignment of single line text, which means that the length of the text is not going to exceed the width of the container. This can be achieved easily with a simple trick of adding a line-height property which is the same as the height of the parent div.
HTML:
       <div>
           <div>Hi there! How you doin’?</div>
       </div>
CSS:
       .a {
               width: 200px;
               height: 100px;
               background-color: #cecece;
               color: #000;
           }
           .b {
               text-align: center;
               line-height: 100px;
           }

This solution is generally implemented for header or menu elements, where the text is usually pre-decided and doesn’t go into the next line.

If we apply the same technique for multi line text, the results are not so pretty. This happens due to the line height property, which is equal to the height of the container element.

The Multi Line Solution:

To achieve the same vertical alignment for multi line text, we use the CSS trick of displaying text as a table element inside the parent div. Once we assign the child div as a table cell, we can assign vertical-align to it to put it exactly at the center! This should work as long as the size of the container is sufficient enough to fit the text.

 

HTML:
       <div>
           <div>
               <p>Hi there!</p>
           </div>
       </div>
       <div>
           <div>
               <p>Hi there! How you doin’?</p>
           </div>
       </div>
       <div>
           <div>
               <p>Hi there! Let’s try and enter the next line!</p>
           </div>
       </div>
CSS:
           .a {
               width: 200px;
               height: 100px;
               background-color: #cecece;
               color: #000;
               float: left;
               margin-right: 10px;
           }
           .b {
               display: table;
               height: 100px;
               width: 200px;
           }
           .b p{
               text-align: center;
               display: table-cell;
               vertical-align: middle;
           }

 

Let’s hope that this tutorial helped you apply these simple CSS tricks to come out of a messy situation and impress your boss!

Author Bio: Shaumik is an optimist, but one who carries an umbrella. An undergrad at IIT Roorkee, he loves writing, when he’s not busy creating some awesome stuff. Find him on Google +.

About author View all posts

Andrew Johnson

Andrew Johnson is founder of BestPSDtoHTML. He loves creative designs, photography, paintings and everything about innovation. As an Internet entrepreneur, he constantly tries to develop new ways to bring content faster and closer to the end users in a more streamlined way. His main focus lies in inspiring all the designers and developers with all new ideas through his blogs.

1 CommentLeave a comment

  • Wow!! Excellent part of learning CSS. The best part of this post is the blocks of codes. They ar defined and SHORT. 😛
    A good blog for CSS tutorials.

     

Leave a Reply

Your email address will not be published. Required fields are marked *