当LI包含块级空元素时，列出子弹对齐更改

Question

我希望有人可以解释我遇到的这个奇怪的CSS问题。

我在<img>中有一个空元素（想象<input>或li）。当我将空元素的显示样式更改为“阻止”时，li上子弹的对齐方式会发生变化。如果我使用非空元素（例如<span>）做同样的事情，子弹对齐不会改变。

即使空元素位于另一个块级元素（<div>）内，子弹对齐也会更改。

这是关于JSFiddle的两个例子：

1. Using an <img> element
2. Using a <span> element

结果的屏幕截图（左侧是<img>，右侧是<span>：



我有两个问题：

1. 为什么子弹会这样做？
2. 如何使<img>示例中的项目符号与<span>示例中的项目符号相同？

供参考，样式表：

ul { background: lightgreen; width: 100px; padding-left: 50px; }
div { background: lightblue; }
img { background: lightcoral; }
li { background: lightyellow; }

img { width: 50px; height: 50px; }
img[rel] { display: block; }

HTML：

<ul>
  <li>
    <div><img rel></div>
  </li>
</ul>
<ul>
  <li>
    <div><img></div>
  </li>
</ul>
<ul>
  <li>
    <div><img rel></div>
    <p> ! </p>
  </li>
</ul>
<ul>
  <li>
    <div><img></div>
    <p> ! </p>
  </li>
</ul>

（我知道我的<img>元素没有src属性。这只是为了说明目的。顺便说一下，它仍适用于谷歌浏览器，但不适用于Firefox。）

Answer 1

这是图像对齐的问题，它们默认为底部对齐，这会导致列表项随之移动。要解决此问题，请将其添加到图片代码中：

img {
    display: inline-block;
    vertical-align: middle;
}

display: inline-block是唯一允许垂直对齐工作的显示类型。