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

Question

我想要一个多行文字旁边的图像（通常是两行），其中vertical-align：middle。

当它只有一行时，图像样式中的vertical-align: middle一切正常，但是当文本有多行时，就会开始混乱。

jsfiddle ==＆gt;的 http://jsfiddle.net/QZhG7/1/

Answer 1

我在this Stackoverflow question中找到了解决方案，但需要进行一些调整才能在流畅的布局中使用Pure 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
}

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

要获得最终结果，请访问jsfiddle ==＆gt;的 http://jsfiddle.net/QZhG7/3/

有关详细信息，请访问original Stackoverflow question。