将文本放在另一个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);

尽管如下面的评论所述，它可以使用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;

对齐