Question

所以，我正试图将具有投影的texte居中。但不是CSS属性。我正在使用span et：之前使它跨浏览器。所以，这就是它的样子：

HTML：

<h3 title="Say hello to Stack Overflow"><span>Say hello to Stack Overflow</span></h3>

CSS：

h3 {
    margin: 0 auto;
    font-size: 29pt;
    color: #fefefe;
    letter-spacing: 1px;
    position: relative;
    color: blue;
}

span {
    position: absolute;
    top: 0;
}

h3:before {
    display: block;
    padding: 4px;
    content: attr(title);
    color: rgba(0, 0, 0, .15);
}

问题是，当我尝试将h3居中（带文本对齐）时，只有阴影部分到达中心（here is a jsFiddle）

你有解决方案吗？

Answer 1

我拿出<span>（不需要）并将:before元素添加到原始h3样式中，这似乎有效：

h3:before,
h3 {
    text-align: center;
    margin: 0 auto;
    font-size: 29pt;
    color: #fefefe;
    letter-spacing: 1px;
    position: relative;
    color: blue;
    width:100%; /* This was important for the :before content */
}

h3:before {
    display: block;
    position:absolute;
    padding: 4px;
    content: attr(title);
    color: rgba(0, 0, 0, .15);
}

演示：http://jsfiddle.net/zLAcA/3/

注意：如果您要使用跨浏览器，请不要使用rgba - 它不受支持。实际上，:before也没有很好的支持 - 如果您要进行渐进增强，请尝试CSS3 PIE ~~- 您将能够在IE中使用text-shadow属性。~~

修改：与CSS3PIE一样，text-shadow不是受支持的功能。如果阴影很重要，您仍需要一个解决方法。您目前拥有的可能是最好的方法，但只能在IE8中使用，因为以前的版本中有no :before support 。对于IE，你可以try a filter，但是好运找到一个看起来不错的对不起。

h3 { filter: DropShadow(Color=#d9d9d9, OffX=4, OffY=4, Positive=1); }

Answer 2

正如推特上所说：http://jsfiddle.net/zLAcA/2/


    h3 {
        text-align: center;
        margin: 0 auto;
        font-size: 29pt;
        color: #fefefe;
        letter-spacing: 1px;
        position: relative;
        color: blue;
        position:relative;
    }

    span {
        position: absolute;
        top: 0;
    }

    h3:before {
        display: block;
        padding: 4px;
        content: attr(title);
        color: rgba(0, 0, 0, .15);
        position:absolute;
    }

刚刚在影子上添加了一些位置:)

尝试使用投影中心文本

2 个答案: