0

http://dabblet.com/gist/3433883の例を次に示します。

この例では、私の質問は、内部の最後のテキスト「何らかのテキスト」<li>を余分な要素でラップせずに垂直方向に揃える方法です。IE7+互換で探しています。

それをaでラップしてspan与えると、これを達成できることはすでに知っていますvertical-align:middleが、それなしで可能かどうか興味があります。

HTML

<ul>
<li><span class="icon"></span><b>bold text</b>Some text</li>
</ul>

CSS

ul {list-style:none}
li {background:yellow}
.icon {background:url(http://www.gfdl.noaa.gov/pix/user_images/kd/qt_icon.png);
        display:block;
        height:32px;
        width:32px;
        display:inline-block;
        margin-right:10px;
        vertical-align:middle}
b {vertical-align:middle}

編集：（いくつかの回答の後）

<b>-tagの vertical-align:middle を削除すると。間隔が不均一になります

ここに画像の説明を入力

4

4 に答える 4

1

vertical-align最高の要素（通常はIMGタグですが、あなたの場合は背景画像付き）に設定するだけで十分です。タグSPANで安全に削除できます。<b>この CSS を概念実証として試してください。

ul {
    list-style:none
}
li {
    background:yellow;
}
.icon {
    background:pink;
    height:48px;
    width:32px;
    display:inline-block;
    margin-right:10px;
    vertical-align:middle
}

ここに画像の説明を入力

http://jsfiddle.net/tVtKD/

IE7+ でテスト済み

アップデート

OPの考えとは反対に、このテキストには不均一な間隔がありません.正しいグリフを測定するだけです. 大文字の先頭から小文字のyまたはpの末尾まで。この拡大画像をご覧ください。両側にちょうど 15 ピクセルのスペースがあります。

ここに画像の説明を入力

于 2012-08-23T08:03:02.007 に答える
1

<b>-tagの vertical-align:middle を削除する必要があります。

于 2012-08-23T07:52:55.357 に答える
0

に を追加vertical-alignしliます。

ul {list-style:none}
li {background:yellow;
vertical-align:middle;
}
.icon {background:url(http://www.gfdl.noaa.gov/pix/user_images/kd/qt_icon.png);
        display:block;
        height:32px;
        width:32px;
        display:inline-block;
        margin-right:10px;
        vertical-align:middle}

ここに画像の説明を入力

于 2012-08-23T07:50:54.720 に答える
0

タグline-height内のテキストを垂直方向に揃えるためにも使用できます。<li>

ul {list-style:none}
li {background:yellow; line-height:32px;}
.icon {background:url(http://www.gfdl.noaa.gov/pix/user_images/kd/qt_icon.png);
    display:block;
    height:32px;
    width:32px;
    display:inline-block;
    margin-right:10px;
    vertical-align:middle}

これは、Windows、Mac、Linux プラットフォームで同じように機能するため、 を使用してテキストを垂直方向に揃えるという私の個人的な好みです。line-heightフォントは (特に Mac では) 異なり、明示的に指定するline-heightことで、すべてのプラットフォームで行が同じように揃えられるようになります。

于 2012-08-23T07:51:46.007 に答える