0

テキストとアイコンを垂直方向に中央揃えにしようとしていますが、問題があり、修正できません。
これが私の例です：http://jsfiddle.net/NMGkv/1/

テキストが 1 行の場合はすべて正常に機能しますが、2 行以上の場合、アイコン (黒い四角) が正しく中央に配置されません。
私が望むのは、アイコンを常にli要素の中央に配置することだけです。
どんな種類の助けにも感謝します。
コード：

li {
    background:#ccc;
    width:150px;
    height:50px;
    margin-top:2px;
}
.center {
    display:table-cell;
    width:150px;
    height:50px;
    vertical-align:middle;
}
p, span {
    font-family:Arial;
    font-size:14px;
    display:inline-block;
    padding:0;
    margin:0;
}
p {
    width:100px;
    line-height:14px;
}
.icon {
    background:#666;
    width:16px;
    height:16px;
    margin-right:5px;
    margin-left:2px;
    vertical-align:text-top;
}

<ul>
    <li>
        <div class="center">
            <span class="icon"></span>
            <p>This is text on two lines</p>
        </div>
    </li>
    <li>
        <div class="center">
            <span class="icon"></span>
            <p>This is text on three line text text </p>
        </div>
    </li>
    <li>
        <div class="center">
            <span class="icon"></span>
            <p>Text on one line</p>
        </div>
    </li>
</ul>
4

2 に答える 2

2

このCSSは機能するはずです：

li {
    background:#ccc;
    width:150px;
    height:50px;
    margin-top:2px;
}
.center {
    display:table-cell;
    width:150px;
    height:50px;
    vertical-align: middle;
}
p, span {
    display: block;
    font-family:Arial;
    font-size:14px;
    display:inline-block;
    padding:0;
    vertical-align: middle;
}
p {
    width:100px;
}
.icon {
    background:#666;
    width:16px;
    height:16px;
    margin-right:5px;
    margin-left:2px;
}

変更を見つけるには、差分を実行する必要があります。

于 2013-02-10T11:24:21.963 に答える
0

vertical-alignは要素に対して機能し、他のタグについては、padding-topとpadding-bottomを使用して垂直方向の整列を設定する必要があります。

于 2013-02-10T11:59:31.757 に答える