demo

Question

我不经常使用CSS，所以每次使用它时我都要再次尝试并通过反复试验来计算。

我要做的是将icon_32放在同一行：“我做了这个。”图像是32px高，所以我想将它向下移动一点，使其与线对中。

经过实验，我发现了一个适用于Safari和Chrome的解决方案，但在Firefox中不起作用。

这就是我正在做的事情：

CSS

ul, li {
    /* spacing */
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    /* list */
    list-style: none;
}

#work_list li {
    display: block;
    /* spacing */ 
    margin-bottom: 10px;
}

#work_list .icon_32 {
    display: inline-block;
    position: absolute; /* This doesn't work in Firefox. */
    cursor: pointer;
    /* spacing */
    margin-top: -8px;
    margin-left: 8px;
}

HTML

<ul id="work_list">
    <li> I made this. <div class="icon_32"></div></li>
    <li>I write, sometimes.</li>
</ul>

因为无法向内联元素添加padding-top，所以我将图标的位置设为绝对值。让它绝对的问题是我必须手动设置margin-left因为图标不会随文本自动向左移动。通过在display上设置block到<li>并在图标上设置display到inline-block，我想要实现的目标是有效的（尽管我并不完全明白为什么）。然而，这在Firefox中不起作用（我甚至还没有在IE中测试过。）

是否有正确的方法可以实现我在所有浏览器上正常运行的功能？

更新：我是如何通过使用答案中的建议来解决这个问题的。非常感谢您的帮助！

我不想使用line-height，因为我想保留li的原始高度。我刚刚摆脱了不必要的position: absolute并添加了vertical-align: middle。这样做之后，图像仍然影响li，所以我只是说一个ID，受影响li和已改写了margin-bottom所以其高度之和+底边距的高度将等于li没有32px图像的总和。

这就是最终结果：

CSS

ul, li {
    /* spacing */
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    /* list */
    list-style: none;
}

#work_list li {
    display: block;
    /* spacing */ 
    margin-bottom: 10px;
}

#work_list #work_item_icon {
    margin-bottom: 3px;
}

#work_list span.icon_32 {
    display: inline-block;
    cursor: pointer;
    /* spacing */
    vertical-align: middle;
    margin-top: -8px;
    margin-left: 8px;
}

HTML

<ul id="work_list">
    <li id="work_item_icon">I made this. <span class="icon_32"></span></li>
    <li id="work_item_writing">I write, sometimes.</li>
</ul>

Answer 1

此问题也适用于firefox，请将position:relative提交给LI

或者最好像这样编辑你的HTML：

<ul id="work_list">
    <li><span>I made this.<span> <div class="icon_32"></div></li>
    <li>I write, sometimes.</li>
</ul>

<强> CSS：

li span, icon_32{
display:inline-block;
}

Answer 2

有很多方法可以做到这一点：

您可以使用负边距来平衡线高和图像高度之间的差异。一行文字的高度似乎是20px;因此，margin-top: -6px和margin-bottom: -6px会使32px高图像的行为就像是20px一样：

#work_list img.icon_32
{
    vertical-align: middle;
    margin-top: -6px;
    margin-bottom: -6px;
}
#work_list span.icon_32
{
    /* //// SPAN AS IMAGE \\\\ */
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(http://dummyimage.com/32x32/cf0/000&text=32x);
    /* \\\\ SPAN AS IMAGE //// */
    vertical-align: middle;
    margin-top: -6px;
    margin-bottom: -6px;
}

demo

或者，您可以将线条高度设置为等于图像的高度，并为图像设置vertical-align: middle。您可以使用负边距顶部调整几个像素：

ul, li
{
    line-height: 32px;
}
#work_list img.icon_32
{
    vertical-align: middle;
    margin-top: -4px;
}
#work_list span.icon_32
{
    /* //// SPAN AS IMAGE \\\\ */
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(http://dummyimage.com/32x32/cf0/000&text=32x);
    /* \\\\ SPAN AS IMAGE //// */
    vertical-align: middle;
    margin-top: -4px;
}

demo

Answer 3

尝试将此css规则添加到您的li，

li {line-height: #px;}

玩线高度来获得你想要的东西。此外，如果使用行高会影响图像，请向其添加float: left;，或将其从正常流程中取出。

Answer 4

我认为您的解决方案是line-height。您可以在li上设置它，它将垂直居中文本。

#work_list li {
    line-height: 32px;
}

#work_list .icon_32 {
    height: 32px;
    width: 32px;
}

Answer 5

给出包含图标div相对位置的元素，它将使图标相对于该容器定位。

Answer 6

http://jsfiddle.net/9HeNy/

制作icon_32元素position : relative及其父li元素line-height : 32px。上面有一个演示。

line-height的文档：https://developer.mozilla.org/en/CSS/line-height

使用文本将图像添加到<li>的末尾，使图像垂直居中并带有文本</li>

6 个答案:

demo

demo