1

このjsFiddleで、画像とテキストを垂直方向に揃えるにはどうすればよいですか？

HTML：

<div class="step_div">
    <div class="step_div_inner">
        <div class="step_div_inner_image">
            <img src="http://i.imgur.com/TasZn.png">
        </div>
        <div class="step_div_inner_text">
            here is some text here is some text here is some text here is some text here is some text here is some text 
        </div>
    </div>
</div>​

CSS

.step_div_inner_text {
    font-size:18px;
    width:460px;
    line-height:24px;
    position:relative;
    left:5px;
    bottom:14px;
    display:inline-block;
}
.step_div_inner_image {
    display:inline-block;
}
.step_div {
    padding:20px 0;
}
.step_div_inner {
    width:574px;
    margin:0 auto;
}​
4

3 に答える 3

1

次のようなフロートを使用できます。

http://jsfiddle.net/xH2da/10/

必要に応じて、必ずクリアする必要があります。

于 2012-08-06T21:01:30.563 に答える
0

http://jsfiddle.net/xH2da/11/

CSS：

.step_div_inner_text {
    font-size:18px;
    width:460px;
    position:relative;
    display:inline-block;
    vertical-align: top;
}
.step_div_inner_image {
    display:inline-block;
    vertical-align: middle;
    line-height: 2em;
}
.step_div {
    padding:20px 0;
}
.step_div_inner {
    width:574px;
    margin: auto;
}

http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

于 2012-08-06T21:01:44.333 に答える
0

これが私のベストショットです...

.step_div_inner_text {
    font-size:18px;
    width:460px;
    line-height:18px;
    left:5px;
    vertical-align:top;
    bottom:14px;
    display:inline-block;
}
.step_div_inner_image {
    display:inline-block;
}
.step_div {
}
.step_div_inner {
    width:574px;
    margin:0 auto;
}

また、画像の数ピクセル上に画像を押し込むこともできます...使用しているテキストとフォントによって異なります。あなたの質問に対する決定的な答えはありません。しかし、あなたの特定のケースの問題は、行の高さがフォントサイズよりも大きいことでした。

行の高さに固執したい場合は、テキストに収まるまで image-div に上部パディングを追加する必要があります...試行錯誤:)

于 2012-08-06T21:09:05.640 に答える