[英]Vertically align center inside div element
My text have only 1 line and my picture will fit the container height. 我的文字只有一行,我的图片符合容器高度。
I want text and picture to align center vertically. 我希望文字和图片垂直对齐中心。
I try margin top text class with negative value and position relative but nothing work what I really want. 我尝试使用负值和位置相对的margin top文本类,但没有什么工作我真正想要的。
HTML 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 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; }
I propose this fix: 我建议这个修复:
.Friend .Name{ line-height: 80px; vertical-align:top; }
Live demo here: http://jsfiddle.net/keaukraine/WNT7U/ 现场演示: http : //jsfiddle.net/keaukraine/WNT7U/
Works in latest Firefox, Chrome and IE down to IE8. 适用于最新的Firefox,Chrome和IE,适用于IE8。 For IE7, apply this hack:
对于IE7,应用此hack:
.Friend .Name { *zoom:1; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.