如何垂直對齊這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，直到它適合你的文字...試驗和錯誤:)