Question

在this 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;
}

Answer 1

您可以使用这样的浮点数：

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

如果需要，你必须确保清除它们。

Answer 2

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

Answer 3

这是我最好的拍摄......

.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中添加一个top-padding，直到它适合你的文字......试用和错误：）

如何垂直对齐这两个div？

3 个答案: