CSS中心文本（在列表项网格中）

Question

我有一些简单的CSS，它制作了一个漂亮的小三乘三格。我似乎无法做到的是文本的中心（垂直和水平）。继承人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;
        }​

我尝试过纵向对齐，但无济于事。我是否需要跨越每个列表项？我不能跟上css！

Answer 1

将line-height: 99px;（垂直对齐）和text-align: center;（水平对齐）添加到#card li，如下所示：

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

请参阅此fiddle

Answer 2

如果您可以将HTML更改为单独的列表，我会suggest

如果没有，并且您知道只有一行使用line-height

如果之前的建议无效，请span将其设为display: table-cell;