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上的垂直对齐：中间。我得到不均匀的间距

在此处输入图像描述

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 px 的空间。：

在此处输入图像描述

于 2012-08-23T08:03:02.007 回答
1

<b>您应该删除-tag上的垂直对齐：中间。

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

这是我个人使用 垂直对齐文本的偏好line-height，因为它在 Windows、Mac 和 Linux 平台上同样适用——字体不同（尤其是在 Mac 上），并通过明确指定line-height确保行在所有平台上的对齐方式相同。

于 2012-08-23T07:51:46.007 回答