Question

I want to superimposed two texts in css.

I wrote this:

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

But I wanted to have the two texts horizontally centered. (Like that but superimposed).

How can I do it?

Answer 1

Hopefully this is what you want: JSFiddle

First, make it centered by setting left: 50%;.
Then, set a width, for example width: 400px;
The span has now a offset, let’s fix that margin-left: -200px; (Use half the width)
Then, at last, center the text inside the span: text-align: center;