垂直对齐图像右侧的文本答案

【问题标题】：Vertically align text on the right of the image垂直对齐图像右侧的文本
【发布时间】：2014-09-18 21:35:27
【问题描述】：

图像左侧有许多垂直对齐文本的示例，但如果我尝试将文本放置在图像的右侧，这些相同的示例将不起作用。

图像左侧文本的工作示例如下：http://jsfiddle.net/rVTcv/

HTML：

<div style="height:259px;" class="how-right">
    <img src="img/how-it-works/num-1.PNG" width="267px" height="259px">
    <span>JivaWay has a simple system to get you in shape in just 6 weeks.  And it's so easy to follow, even people who have never exercised before can do it.</span>
</div>

CSS：

.how-right img {
    float:right;
    margin-left:20px;
    vertical-align:middle;
}
span {
    height: 259px;            
    display: table-cell;
    vertical-align: middle;
}

如果我尝试通过移动图像的float:right 属性到文本来移动右侧的文本，那么我不会得到预期的结果。

【问题讨论】：

标签： css html css-float vertical-alignment

【解决方案1】：

您的方法不对，只需将图像浮动到左侧并将边距更新到右侧

http://jsfiddle.net/rVTcv/140/

.how-right img {
    float: left;
    margin-right: 20px;
    vertical-align :middle;
}

【讨论】：

这真的很简单。非常感谢！