如何垂直對齊這2個div？

在this jsFiddle中，如何垂直對齊圖像和文本？如何垂直對齊這2個div？

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

來源

2012-08-06 ben

試圖把所有這些在一張桌子上。或者如果你只想把圖像或文字居中，把它們放在一個單獨的表格中。 – boyd 2012-08-06 20:53:50

圖像沒有出現在小提琴中。 – 2012-08-06 20:54:37

這裏有一些關於垂直對齊的提示：http://phrogz.net/css/vertical-align/index.html – 2012-08-06 20:55:14

你可以使用花車這樣的：

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

你只需要在必要時一定要清除它們。

來源

2012-08-06 21:01:30 MrDCGN

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-06 21:01:44

在Windows 7上使用Opera 12，IE 8和Firefox 14.0.1進行測試，並且工作正常。 – 2012-08-06 21:07:15

這是我最好的拍攝......

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

來源

2012-08-06 21:09:05 Sauer

如何垂直對齊這2個div？

回答

相關問題