css - 垂直对齐 div 元素内的中心

Question

我的文字只有 1 行，我的图片将适合容器高度。
我希望文本和图片垂直对齐中心。
我尝试使用负值和相对位置的边距顶部文本类，但没有什么能满足我真正想要的。

jsfriddle在这里

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

​</p>

Answer 1

我建议这个修复：

.Friend .Name{ line-height: 80px; vertical-align:top; }

现场演示：http: //jsfiddle.net/keaukraine/WNT7U/

适用于最新的 Firefox、Chrome 和 IE 到 IE8。对于 IE7，应用此 hack：

.Friend .Name { *zoom:1; }