垂直對齊div元素內部的中心

我的文本只有1行，我的圖片將適合容器高度。
我想讓文字和圖片垂直居中對齊。
我嘗試利用負值和相對位置嘗試保證金頂部文本類，但沒有任何工作是我真正想要的。垂直對齊div元素內部的中心

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

來源

2012-12-25 hsgu

像這樣：http://jsfiddle.net/wCAwm/2/？ – Passerby

啊就這樣對我來說是一個很大的忽視。 – hsgu

這裏有兩個簡單的方法來集中一個元素在一個div，垂直，水平或兩者（純CSS）：http://stackoverflow.com/a/31977476/3597276 –

我提出此修復程序：

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

現場演示這裏：http://jsfiddle.net/keaukraine/WNT7U/

工程在最新的Firefox，Chrome和IE下降到IE8。對於IE7，應用此黑客：

.Friend .Name { *zoom:1; }

來源

2012-12-25 08:27:40 keaukraine

這一個也工作謝謝。 – hsgu

垂直對齊div元素內部的中心

回答

相關問題