1

私はいくつかの単純な css を持っています。それは素敵な小さな 3 x 3 グリッドになります。私ができないように見えるのは、テキストを（垂直方向と水平方向の両方で）中央に配置することです。ここに 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についていけない！

4

2 に答える 2

3

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

このフィドルを参照してください

于 2012-07-26T13:56:24.880 に答える
0

HTMLを個別のリストに変更できる場合は、お勧めします

そうでない場合は、行が 1 つしか使用されないことがわかっています。line-height

以前の提案が役に立たない場合は、spanそれを作成してくださいdisplay: table-cell;

于 2012-07-26T14:00:46.923 に答える