Take the 2-minute tour ×

My .cent class is for <li> elements. I want to center the text of the <li> both horizontally and vertically. text-align:center; takes care of horizontal centering, but the vertical centering isn't working. What's the CSS trick for this?

  vertical-align: middle;
share|improve this question
Try this link. Nice explanation and two possible solutions. –  Zabba Dec 16 '10 at 12:22
I think this question I asked might help you too. stackoverflow.com/questions/4445133/… Good luck! –  Trufa Dec 16 '10 at 13:41
add comment

3 Answers

up vote 6 down vote accepted

Use line-height property.

Set it equal to height of element, and text will be vertically centered.

  height: 20px;
  width: 20px;
  text-align: center;
  /*vertical-align: middle;*/
  line-height: 20px;
share|improve this answer
This won't work however if there is more than 1 line of text (though I'd hate to see > 1 line of text in a container 20px tall :P ). –  alex Dec 16 '10 at 12:31
add comment

What is its parent?

.parent {
   position: relative;   

.cent {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -10px;
   margin-top: -10px;

Or if you want vertical-align: middle to work, set display: table-cell.

share|improve this answer
add comment

Try to set the style for li tag, margin and padding tags are will help you


# set default
  margin: 0;
  padding: 0;

after write the style for your class cent, it will be affect the li tag properly.

share|improve this answer
add comment

Your Answer


