css - 'vertical-align: middle' 中多行文本旁边的图像，具有流畅的布局（来自 YUI 的纯 CSS）

Question

我想要一个带有垂直对齐：中间的多行文本（通常是两行）旁边的图像。

当它只有一行时，vertical-align: middle图像样式一切正常，但当文本超过一行时，就开始混乱了。

jsfiddle==> http://jsfiddle.net/QZhG7/1/

Answer 1

我在这个 Stackoverflow question中找到了解决方案，但它需要一些调整才能在流畅的布局中与纯 CSS 一起正常工作。

首先，我需要创建一个div环绕图像。

.

这是：

<img src="image.png">

变成这样：

<div class="image"> <img src="image.png"> </div>

.

和 CSS：

.pure-u-1-3 { 
    display: table-cell;
    vertical-align: middle;    
}
.image, span {
    display: table-cell;
    vertical-align: middle;
}
.image {
   width: 50px
}

Tha 以下代码：.image { width: 50px }是必需的，因为纯 CSS 会将图像“调整”为更小的尺寸。删除此行并观察台式机/平板电脑版本中发生的情况。

.

最终结果请访问jsfiddle==> http://jsfiddle.net/QZhG7/3/

有关更多信息，请访问原始 Stackoverflow 问题。