Question

I need to display one letter over another one in a link and want them to be CENTERED. I’ve tried postion: relative and absolute, but it’s impossible to center the letters.

Any ideas? I want them exactly to be one over another, don’t ask me why 🙂

Here’s the code:

<a href="#">
    <span>O</span>
    <span>B</span>
</a>

All I know is the width of parent link, but have no idea what’s the width of given letters.

Here’s code to play width:

http://jsfiddle.net/ZYhzJ/

Edit

Here’s an example of how should it look like (it’s not centered and I can’t use negative margins if I won’t know width of these spans):

http://jsfiddle.net/ZYhzJ/2/

Answer 1

http://jsfiddle.net/d7Qhq/1/

a {
    text-align: center;
    display: block;
    background-color: red;
    line-height: 50px;
    width: 50px;
    height: 50px;
    border-radius: 100px;

    position: relative;
}

a span {
    position: absolute;
    display: block;
    line-height: 50px;
    width: 50px;
    height: 50px;
}

Something like that?