在一个容器中将字母放在彼此/居中的字母上?

时间:2012-10-13 18:28:54

标签: html css position center

我需要在链接中显示另一个字母,并希望它们为中心。我尝试过postion:相对和绝对,但不可能将字母居中。

有什么想法吗?我希望他们完全相同,不要问我为什么:)

以下是代码:

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

我所知道的是父链接的宽度,但不知道给定字母的宽度是多少。

这是播放宽度的代码:

http://jsfiddle.net/ZYhzJ/

修改

以下是一个示例应该是什么样的(它没有居中,如果我不知道这些跨度的宽度,我就不能使用负边距):

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

2 个答案:

答案 0 :(得分:0)

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;
}

那样的东西?

答案 1 :(得分:0)

http://jsfiddle.net/ZYhzJ/1/

调整高度(和行高=高度的一半)和填充以放置字母。