W3C会给我们一些见解。

Question

为什么图像不是以李为中心？它的尺寸是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>
    ...

enter image description here

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>
    ...

Answer 2

它垂直居中（在Chrome / Firefox / IE中测试了你的css /标记）

您是否拥有有效的doctype？

Answer 3

您可以阅读vertical-align及其工作原理here 正如animuson here is how评论的那样，您应该使用内联元素和vertical-align。

基本上，您需要垂直对齐两个内联元素，并且只在一个元素上完成您还应该尝试在包含文本的块上保留line-height属性。

这是一个JSFiddle example - 我还提供了一些证明它实际上是居中的

CSS

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

#information-list li img,
#information-list li span{
    vertical-align:middle;
}

#information-list li span{
    font-weight: bold;
    line-height: 50px;
}

HTML

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

这是截图

vertical align with inline elements

W3C会给我们一些见解。

www.w3.org - line-height：

在内容由内联级元素组成的块容器元素上，“line-height”指定元素中线框的最小高度。
  最小高度包括基线以上的最小高度和低于基线的最小深度，就像每个线框以带有元素的字体和线高属性的零宽度内联框开头一样。我们称这个想象的盒子为“支柱”。（这个名字的灵感来自TeX。）

假设字体上方和下方字体的高度和深度是字体中包含的指标。（有关详细信息，请参阅CSS级别3。）

在未替换的内联元素上，'line-height'指定用于计算线框高度的高度。

www.w3.org - vertical-align：

此属性会影响由内联级元素生成的框的行框内的垂直定位。

注意。此属性的值在表的上下文中具有不同的含义。有关详细信息，请参阅表高度算法部分。

以下值仅对父内联元素或父块容器元素的strut有意义。

在以下定义中，对于内联非替换元素，用于对齐的框是高度为'line-height'的框（包含框的字形和每边的半导体，请参阅上面）。对于所有其他元素，用于对齐的框是边距框。

默认阻止

您提供的HTML由4个块组成，默认情况下具有这些display属性。

<ul> - 被视为block
<li> - 视为list-item
<img> - 被视为inline-block（placed as inline, but formatted as a block）
<strong> - 视为inline

尝试记住它们。虽然它们对这种特定情况影响不大，但最好知道defaults和what they do and what they are for。

另见

9.2.2.1匿名内联框

任何直接包含在块容器元素内（不在内联元素内）的文本都必须被视为匿名内联元素。

图像不是垂直居中的

3 个答案:

W3C会给我们一些见解。

默认阻止