使用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;
}

演示

此外，還有更多選項可將多行文本垂直居中。

Answer 2

您應該將span標簽垂直對齊。 您應該使用CSS表： display:table和display:table-cell 。 這些不會將元素放入實際表中，而只是允許正確使用vertical-align （基本上將所有內容都視為內聯而不是阻塞）。

將display:table應用於父元素（在您的情況下為how-right ）。 將display:table-cell應用於實際的span標簽。

這是CSS：

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

這是一個JSFiddle，因此您可以看到最終結果： http : //jsfiddle.net/zdZYY/