Vertically Centering With Line-Height

Problems:

We want to keep the content displayed center vertically in one container(div, a, p, span etc). The contents' height is less than the container's height.

    height: 28px;
    font-size: 12px;

 Quite strange, the content will keep displayed at the top as below.

     Even if we use, it still keep the same.

vertical-align: bottom;

  vertical-align is not suppose to put the content in the middle of the container, but to be allign with what before and after. Here is an example:

http://www.w3school.com.cn/tiy/t.asp?f=csse_vertical-align

 

Solution:

Option 1. Set line-height to its height, then the line will be vertically alligned.

 

height: 28px;
line-height: 28px;
font-family: Arial;
font-size: 12px;

Option 2. Keep the container's height the same as the content's height and add paddings on top and bottom.

    height: 12px;
    font-size: 12px;
    line-height: 12px;/*We still need line-height to keep it center vertically*/
    padding: 7px 20px 7px 4px;

 

Related Patterns:

Horizontally centering with "margin auto"