叠加并水平对齐的两个文本

Question

我想在css中叠加两个文本。

我写了以下内容：

HTML：

<div id="container" >
    <span id="w1" >One text</span>
    <span id="w2" >And another superimposed to the first</span>
</div>

CSS：

#container
{
    position:relative;
}
#w1,#w2
{
    position:absolute;
    top:0px;
    left:0px;    
}

JSFiddle

但我想让这两个文本水平居中。(类似于that，但已叠加)。

我该怎么做呢？

Answer 1

希望这就是您想要的：JSFiddle

首先，通过设置left: 50%;使其居中。然后，设置宽度，例如width: 400px;跨度现在有了一个偏移量，让我们修改一下margin-left: -200px; (使用宽度的一半)，最后，在跨度内居中显示文本：text-align: center;

Answer 2

尝试添加以下内容：

#w1 { 
padding-left: 100px;
}