2013-08-05 139 views
2

無論我看起來如何操作,我都會在垂直居中顯示圖像時遇到問題。如何在圖像旁邊垂直居中顯示文字

任何想法,爲什麼這是?我已經搜索,但無濟於事,任何幫助將不勝感激!謝謝!

(您可能需要使結果窗口更寬,看看我說的。)

FIDDLE

HTML:

<div class="first"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Quisque varius pulvinar imperdiet. Cras quam orci, <br> 
     Duis vulputate risus rutrum, elementum purus non,</p> 
    <img class="ipad" src="http://www.technobuffalo.com/wp-content/uploads/2012/12/ipad-mini-scaled-1.jpg"> 
</div> 

CSS:

p { 
    margin: 0; 
    padding: 1em 0; 
    font-size: 1.8em; 
    line-height: 1.5; 
} 

.first { 
    height: 100%; 
    vertical-align: middle; 
    line-height: 0; 
} 

.first p { 
    display: inline-block; 
    width: 49%; 
} 

.ipad { 
    display: inline-block; 
    width: 49.2%; 
} 
+0

圖像沒有在撥弄出。你可能必須給src'一個完整的路徑,而不是相對路徑。 – s0d4pop

+0

對不起,剛更新了一個通用的ipad圖像。 – steveai

回答

4

我認爲下面的CSS可以做到這一點:

p { 
    margin: 0; 
    padding: 1em 0; 
    font-size: 1.8em; 
    line-height: 1.5; 
} 

.first { 
    height: 100%; 
    line-height: 0; 
} 

.first p { 
    vertical-align: middle; 
    display: inline-block; 
    width: 49%; 
} 

.ipad { 
    vertical-align: middle; 
    display: inline-block; 
    width: 49.2%; 
} 

應用vertical-align: middle.first p.ipad

vertical-align屬性沒有被繼承,因此您需要爲需要調整的子元素指定它。

參考:http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

見小提琴演示:http://jsfiddle.net/audetwebdesign/UwffH/

+1

優秀,像魅力一樣工作。謝謝,馬克! – steveai

-1

我建議你使用<table>但它不是一個良好的編程習慣。

HTML:

<div class="first"> 
    <table border='0'><tr><td> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius pulvinar imperdiet. Cras quam orci, <br> Duis vulputate risus rutrum, elementum purus non, </p></td><td> 
     <img class="ipad" src="http://www.technobuffalo.com/wp-content/uploads/2012/12/ipad-mini-scaled-1.jpg"></td></tr></table> 
        </div> 

CSS:

p { 
    margin: 0; 
    padding: 1em 0; 
    font-size: 1.8em; 
    line-height: 1.5; 
} 

.first { 
    height: 100%; 
    vertical-align: middle; 
    line-height: 0; 
} 

.first p { 
    display: inline-block; 
    width: 49%; 
} 

.ipad { 
    display: inline-block; 
    width: 100%; 
}