How to align text vertically ?

Question

What is the easiest way to align the text vertically here with CSS ?

<ul>
    <li>Hello</li>
    <li>Bye Bye</li>
    <li>Ciao</li>
</ul>

li {
    border: 1px solid black;
    width: 100px;
    height: 50px;
    margin-bottom: 20px;
    text-align: center;
}

Answer 1

Hacky, but possibly the easiest way:

li {
    display: table-cell; 
    vertical-align: center;
}

You will need to add a background image in place of the list item bullet.

Answer 2

If you have just one line of text, you can set the line-height to the same value as the height. This works for any element.

Answer 3

If you know you're always going to center a single line you could match height and line-height

li {
    ...
    height: 50px;
    line-height: 50px;
    ...
}

Answer 4

Try the vertical-align property:

http://www.w3schools.com/css/pr_pos_vertical-align.asp