0

完成这样的事情的最佳方法是什么，但是图标与文本中间垂直对齐（长度可变）？

http://i.imgur.com/OcGLUoG.png

图标是 CSS 精灵，当鼠标悬停在图标或相关文本上时，背景会移动超过 26 像素

4

2 回答 2

3

与 CSS 精灵兼容的新答案

作为对@Octavian 的反馈的回应，这里有一种不同的方式来处理仍然允许使用 CSS 精灵的问题。这里的解决方案是在其子节点display:table上使用li和display:table-cell，以便垂直对齐它们。div然后，可以将带有 a的占位符代替图像background-image用于精灵。这是一个jsFiddle，代码如下：

CSS

ul {padding-left:0;}

li {display:table;margin-bottom:20px;}

.image-holder {
    display:table-cell;
    width:26px;
    height:26px;
    vertical-align:middle;
    background-image:url('http://placehold.it/52x26');
    background-repeat:no-repeat;
    background-position:left center;
}

li:hover .image-holder {background-position:right center;}

.text {padding-left:30px;display:table-cell;}

HTML

<ul>
    <li>
        <div class="image-holder"></div>
        <span class="text" style="display:table-cell;">www.website.com</span>
    </li>
    <li>
        <div class="image-holder"></div>
        <span class="text" style="display:table-cell;">742 Evergreen Terrace<br/>Springfield, SP 12345<br/>United States</span>
    </li>
    <li>
        <div class="image-holder"></div>
        <span class="text" style="display:table-cell;">T) (800) 555-5555<br/>F) (800) 666-6666</span>
    </li>
</ul>

旧答案，更优雅但与精灵不兼容

另一种选择是将每个图像用作位于background-image每个li. 这里 CSS 的关键部分是background-position，它的第一个参数表示水平对齐（top在本例中），第二个参数表示垂直对齐（center在本例中）。 文档在这里。这是一个jsFiddle，代码如下：

CSS

li {
    background-position:left center;
    background-repeat:no-repeat;
    padding-left:40px;
    padding:5px 0 5px 60px;
    margin-bottom:20px;
    list-style-type:none;
    background-image:url('http://placehold.it/30x30');
}

HTML

<ul>
    <li id="website">www.website.com</li>
    <li id="address">742 Evergreen Terrace<br/>Springfield, SP 12345</li>
    <li id="phone">T) (800) 555-5555<br/>F) (800) 666-6666</li>
    <li id="email">info@website.com</li>
    <li id="share">Share via email</li>
</ul>

编辑 1响应@cimmanon 的评论（谢谢！）示例现在适用于大于文本的图像，并且我发布了一个随附的演示。

编辑 2根据@Octavian 的注释进行了更改，表明需要中间对齐而不是顶部对齐。

编辑 3与 CSS 精灵兼容的新答案

于 2013-06-05T18:15:44.077 回答
0

您想将 设置为line-height图像的高度（或双线的 50%）

于 2013-06-05T19:23:52.453 回答