1

好吧，所以我看了一堆其他类似这样的堆栈溢出问题，但似乎没有任何效果。我不知道为什么它不工作一定是我没有抓住的愚蠢的东西。

我的 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>
4

2 回答 2

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

演示

此外，还有更多用于垂直居中多行文本的选项。

于 2012-12-22T22:55:35.183 回答
1

您应该垂直对齐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/

于 2012-12-22T23:00:38.273 回答