html - 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;
}

看到这个小提琴

Answer 2

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

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

如果以前的建议没有帮助，span那就去做吧display: table-cell;