Question

I have some simple css, it makes a nice little three by three grid. What I can’t seem to do is centre the text (both vertically and horizontally). Heres a JSFiddle.

        #card {
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
            border-width: 0 1px 1px 0;
        }

        #card ul {
            padding: 0;
            margin: 0;
        }

        #card li {
            float: left;
            border: 1px solid #ccc;
            border-width: 1px 0 0 1px;
            width: 99px;
            height: 99px;
        }​

I have tried vertical-align but to no avail. do I need to span each list item? I cant keep up with css!

Answer 1

add line-height: 99px; (vertical alignment) and text-align: center; (horizontal alignment) to the #card li, like so:

#card li {
    float: left;
    border: 1px solid #ccc;
    border-width: 1px 0 0 1px;
    width: 99px;
    height: 99px;
    line-height: 99px;
    text-align: center;
}

see this fiddle