列表项<li> </li>中文本问题的垂直对齐方式

Question

以下是一个示例 http://dabblet.com/gist/3433883。

在这个例子中，我的问题是如何使<li>中的最后一个文本“some text”垂直对齐而不将其包含在额外的元素中。寻找IE7 +兼容性。

我已经知道如果我将其包裹在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> - 标记上的vertical-align：middle。我得到不均匀的间距

Answer 1

您应该删除<b> - 标记上的vertical-align：middle。

Answer 2

将vertical-align设置为最高元素（通常为IMG标记，但在您的情况下设置SPAN并带有背景图片）应该足够了，您可以安全地将其删除<b> 1}}标签。试试这个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微米的空间。：

Answer 3

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

Answer 4

您还可以使用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}

我个人倾向于使用line-height垂直对齐文本，因为它在Windows，Mac和Linux平台上同样有效 - 字体不同（特别是在Mac上）并明确指定line-height你确保所有平台上的线条对齐。