如何垂直对齐这2个div？

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

而且你还可以把图片周围的几个像素在图片上方...取决于您使用的文本和字体G。没有定义你的问题的答案。但是，在特定情况下，问题是，行高比字号大。

如果要坚持你的行高，那么你就需要一个顶级的填充添加到您的图像DIV，直到它适合你的文字...试验和错误:)