html - 图片未垂直居中

Question

为什么图像不在 li 的中心？它的尺寸是 25x25px。

#information-list li {
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    border-bottom: 1px solid #c1c0bf;
}

#information-list li img {
    vertical-align: middle;
    margin-right: 10px;
}

<ul id="information-list" class="flat-list">
    <li>
        <img src="images/test.png" />
        <strong>Foo</strong>
    </li>
    ...

Answer 1

试试这个:

#information-list li {
    height: 50px;
    line-height: 50px;
    padding: 0 10px 0 20px;
    border-bottom: 1px solid #c1c0bf;
    background:transparent url(images/test.png) no-repeat left center;
}

<ul id="information-list" class="flat-list">
    <li>
        <strong>Foo</strong>
    </li>
    ...