Question

在带有文字的图像上使用vertical-align时，我得到了意想不到的结果。如果文本比容器宽，它会像这样包装UNDER图像，而不是简单地换行到下一行：

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

我的HTML很简单：

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

overflow-y:scroll（可能不相关）

UL

我在LI上设置了一个高度，足以容纳占位符图像和间距。
我在图片上有vertical-align:middle，以便将文字放在正确的位置，几乎是
其余的只是边距和边框
我不使用花车

如何正确包装文本，最好没有更多标记？

Answer 1

正如@graphicdivine所指出的，有两种方法可以解释“正确”。如果你想要填满图像周围的所有空间，我会按照他的建议做：在图像上使用float: left;。

相反，如果您想在图像旁边放置一个垂直文本块，则可以应用以下内容：

<li style="display: table-row;">
<img src="..." style="vertical-align: middle; display: table-cell;" />
<span style="display: table-cell;">...</span>
</li>

与以前相同的免责声明：这在IE中并不好。此外，它打破了你的“不再标记”规则，但我不确定你想要如何在不做出改变的情况下实现不同的结果。也许我没理解你。

Answer 2

如果图像是静态的，我会在li上使用背景图像，然后只需添加左边距以允许正确的间距

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

您还可以在li上使用边距，以允许在ul

内的图像左侧间隔

如果图像不同，我只需对每个li应用一个类来区分差异

修改seo友好性：

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

  li img {
     display:none
  }

Answer 3

对我来说，你可以漂浮左边的图像。

文本环绕IMG vertical-align：中间不起作用

3 个答案: