無論我看起來如何操作,我都會在垂直居中顯示圖像時遇到問題。如何在圖像旁邊垂直居中顯示文字
任何想法,爲什麼這是?我已經搜索,但無濟於事,任何幫助將不勝感激!謝謝!
(您可能需要使結果窗口更寬,看看我說的。)
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%;
}
圖像沒有在撥弄出。你可能必須給src'一個完整的路徑,而不是相對路徑。 – s0d4pop
對不起,剛更新了一個通用的ipad圖像。 – steveai