將文本置於另一個div的上部中心

Question

我試圖將名稱放在金領獎臺的div的中間（不管單詞中的字母數量）。

我給爲金講臺3點的例子：

這是的jsfiddle：http://jsfiddle.net/alonshmiel/9rY3k/3/

我試圖讓left屏幕的寬度的計算和減少（黃金div的寬度）/ 2，但它沒有奏效。這個詞在同一個地方開始。

<div class="podium-block gold"> 
    <span class="place">1st place</span> 
<span class="sum">$5000</span> 
<span class="name">Jacob Collins</span> 
    <div class="podium"></div> 
</div> 

任何幫助讚賞！

Answer 1

糾正JQuery的最後一部分，它的工作原理：

$('.name').delay(1000).animate({ 
    "opacity": "1" 
}, 500); 

Alhough，因爲它是在下面的評論說，它可以使用CSS

Answer 2

我不知道這是不是可以解決你正在努力實現的，但這裏是CSS解決方案：

.podium { 
    display: table; 
    width: 100%; 
} 

.podium > * { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    color: #fff; /* not needed, just for clarity */ 
    font-size: 16px; /* not needed, just for clarity */ 
} 

Updated fiddle

用於對齊文字頂部變化vertical-align: middle;至vertical-align: top;