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 に答える