Центр одного символа текста по вертикали?

Question

Я пытаюсь центрирования одного символа, например:

<div class='button'>x</div> 
<div class='button'>+</div> 
<div class='button'>*</div> 

.button { 
    border: solid 2px #aaa; 
    -moz-border-radius:2px; 
    -webkit-border-radius:2px; 
    color: #888; 
    width: 16px; 
    height: 16px; 
    font-weight: bold; 
    text-align:center; 
    float: left; 
    margin-right:5px; 
    font:14px Helvetica Neue,Helvetica,Arial,sans-serif; 
    line-height: 100%; 
} 

это центры характер в каждом Div по горизонтали, но не по вертикали - то, что нам нужно сделать, чтобы отцентрировать его по вертикали, а?

Благодаря

Answer 1

Поскольку это один символ:

line-height: 100%; 

и если установка line-height на 100% не работает установить его на фиксированной высоте контейнера:

.button { 
    height:300px; 
    width: 300px; 
    text-align: center; 
    line-height: 300px; 
    border: 1px dotted #999; 
} 

Проверьте здесь: http://jsfiddle.net/7afUH/1/