html - IMG vertical-align :middle not working 下的文字换行

Question

在带有伴随文本的图像上使用垂直对齐时，我得到了意想不到的结果。如果文本比容器宽，它会像这样在图像下换行，而不是简单地换行到下一行:

alt text http://preview.moveable.com/jm/verticalalign.png

我的 HTML 很简单:

<ul>
   <li><img .../> some text </li>
   ...
</ul>

• 我在 UL 上有一个高度和 overflow-y:scroll(可能不相关)
• 我在 LI 上设置的高度足以容纳占位符图像和间距。
• 我在图像上设置了 vertical-align:middle 来让文字在正确的位置，差不多
• 剩下的只是边距和边框
• 我没有使用花车

如何让文本正确换行，最好没有更多标记？

Answer 1

如果图像是静态的，我会在 li 上使用背景图像，然后简单地添加左填充以允许正确的间距

  li {
      background: url(/images/foo.jpg) center left no-repeat;
      padding-left: barpx;
  }

您还可以在 li 上使用边距以允许 ul 内图像左侧的间距

如果图像不同，我会简单地对每个 li 应用一个类来区分差异

为 seo 友好性编辑:

将图像添加到标记中，然后使用您的样式表隐藏它们，这样用户只会看到带有背景图像的图像集，Google 机器人会忽略样式表，因此将在标记中提供图像。

  li img {
     display:none
  }