如何以凸版印刷效果为中心？

Question

考虑这个小提琴：http://jsfiddle.net/qkAJD/

HTML

<div style="width:500px;">
     <h1 class="success-header" title="Success!">Success!</h1>
</div>

CSS

body {
    background: gray;
    margin:0;
}
.success-header {
    color: green;
    display: inline-block;
    font-size: 50px;
    height: 50px;
    margin: 0;
}
.success-header:before {
    content: attr(title);
    position:absolute;
    color:rgba(255, 255, 255, 0.3);
    top:1px;
    left:1px;
}

结果

问题

我们如何将<h1>标签置于其容器中，并保持凸版印刷效果？假设我们事先并不知道容器的宽度是500px。也就是说，难以接受对标题的位置进行硬编码的解决方案。标题中心很容易：

<div style="width:500px;text-align:center">
     <h1 class="success-header" title="Success!">Success!</h1>
</div>

但这破坏了凸版印刷效果：

Answer 1

“影子”绝对与其最近的合格父母有关。您可以通过向其添加position:relative来使直接父母符合条件。

示例：http://jsfiddle.net/qkAJD/5/

.success-header {
    color: green;
    display: inline-block;
    font-size: 50px;
    height: 50px;
    margin: 0;
    position: relative; /* changed line */
}

  

绝对 - 不要为元素留出空间。相反，将其定位   相对于其最近定位的祖先或的指定位置   到包含块。

Source，强调我的。

Answer 2

只需将positon: relative添加到.success-header，因为您已经完全定位了阴影。

.success-header {
    ...
    position: relative;
}

JSFiddle example.