html - 垂直对齐图像旁边的文本，CSS 不起作用

Question

好吧，我已经查看了一堆类似的其他堆栈溢出问题，但似乎没有任何效果。我不知道为什么它不起作用一定是我没听清楚的愚蠢的事情。

我的 CSS

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

我的 HTML

<!-- Number 1 -->
<div style="height:259px;" class="how-right">
    <img src="img/how-it-works/num-1.PNG" width="267px" height="259px">
    <span> 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>

Answer 1

span {
    height: 259px;            
    display: table-cell;
    vertical-align: middle;
}

Demo

此外，more options用于垂直居中多行文本。