Centering Text with Line Height

suggest change


<div class="container">
    <span>vertically centered</span>


    height: 50px;           /* set height */
    line-height: 50px;      /* set line-height equal to the height */
    vertical-align: middle; /* works without this rule, but it is good having it explicitly set */ 

Note: This method will only vertically center a single line of text. It will not center block elements correctly and if the text breaks onto a new line, you will have two very tall lines of text.

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents