css - 两个文本叠加并水平对齐

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; (使用宽度的一半) 然后，最后，将文本居中放置在 span 内:text-align: center;