使用可变长度文本对齐图像

Question

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

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

Answer 1

与CSS sprites兼容的新答案

在回应@Octavian的反馈时，这里有一种不同的方式来处理仍然允许使用CSS精灵的问题。这里的解决方案是在其子项的display:table和li上使用display:table-cell，以便垂直对齐它们。然后，代替图像，可以将具有div的占位符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。这里的关键部分是background-position，其中第一个参数表示水平对齐（本例中为top），第二个参数表示垂直对齐（center在这种情况下）。 Documentation here。这是一个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精灵兼容的新答案

Answer 2

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