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 回答