html - 如何使用 CSS 将图像置于其后的文本中心？

Question

我有以下 HTML:

<p style="line-height: 20px; margin-bottom: 10px;"> </p>
<div class="icon sprite-book-open" style="margin-right: 5px"></div>
Topic: No Topic Title
<p></p>

我的 CSS 是这样的:

.icon {
    background-color: transparent;
    background-image: url(/Images/fugue/sprite.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 16px;
    line-height: 16px;
    width: 16px;
}
.sprite-book-open{ background-position: 0 -288px;  }

有没有什么方法可以没有段落来做到这一点，这样图片图标就会与文本对齐。现在的图标 看起来像素太高了。我想我需要一些方法来集中这个 该行，但我不确定该怎么做

Answer 1

<style>
    .icon {
        line-height: 1.6em;
        padding: 0 0 0 40px;
        background: url('http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0120/book_open.png') no-repeat 5px 50%
    }

</style>
<div class="icon sprite-book-open">
    <p>
        Topic: No Topic Title
    </p>
</div>

---

<style>
    .icon {
    display:inline-block;
    height:32px;
    width:32px;
    background: url('http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0120/book_open.png') no-repeat center center }
    span {

    }
    p, span, .icon {vertical-align:middle}

</style>

<p>
    <div class="icon sprite-book-open"></div>
    <span>Topic: No Topic Title</span>
</p>