将文本置于另一个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;