[英]Vertically align center inside div element
我的文字只有一行,我的圖片符合容器高度。
我希望文字和圖片垂直對齊中心。
我嘗試使用負值和位置相對的margin top文本類,但沒有什么工作我真正想要的。
HTML
<div id="friend_select">
<div class="Friend">
<img class="Picture" src="http://graph.facebook.com/harell/picture?type=square&width=80&height=80" />
<span class="Name">First Name Last Name 1</span>
</div>
<div class="Friend">
<img class="Picture" src="http://graph.facebook.com/harell/picture?type=square&width=80&height=80" />
<span class="Name">First Name Last Name 2</span>
</div>
</div>
CSS
#friend_select{ padding: 5px; width: 400px; height: 500px; }
.Friend{ height: 80px; }
.Friend .Name{ line-height: 80px; }
.Friend .Picture{ line-height: 80px; width: 80px; height: 80px; }
我建議這個修復:
.Friend .Name{ line-height: 80px; vertical-align:top; }
現場演示: http : //jsfiddle.net/keaukraine/WNT7U/
適用於最新的Firefox,Chrome和IE,適用於IE8。 對於IE7,應用此hack:
.Friend .Name { *zoom:1; }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.