中心文本与背景CSS“形状”

我试图创建一个“取消”链接，看起来像一个x后面有一个坚实的红色圆圈。中心文本与背景CSS“形状”

这里是CSS：

.circle { 
    display:inline; 
    padding-left:4px; 
    padding-right:4px; 
    background:rgb(196,15,24); 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
} 

.circle a { 
    font-size:10px; 
    text-decoration:none; 
    color:#fff; 
}

这是HTML代码：

<div class='circle'> 
    <a href="">x</a> 
</div>

它结束了看起来像这样：alt text http://www.freeimagehosting.net/uploads/472563dfe4.png。

我该如何移动x使其在圆内居中？更改margin-top或bottom似乎不工作...

来源

2010-05-26 user5243421

如果相对定位的标签，你可以解决它：

.circle a { 
    font-size:10px; 
    text-decoration:none; 
    color:#fff; 

    position:relative; top:-2px; 
}

调整top值根据自己的喜好。

来源

2010-05-26 19:10:44 mVChr

也许填充，底部会在这里做的伎俩，但我却知道Internet Explorer中（或已经）挑剔垂直内嵌元素上的填充（它会扩展超出行高的内容）。 – 2010-05-26 19:18:50

您的字体必须包含像É，q，X和x等字符，并且无论字符的高度如何，它仍然会显示在背景上。

我发现使用X（或明显是text-transform: uppercase;）和font-family: monospace;对您的代码进行了改进，但并不完美。即使使用等宽字体，mhr提供的解决方案也很有用。

来源

2010-05-26 19:41:44 FelipeAls

我做类似的东西，并使用下面的居中我的文字：

text-align: center; 
margin: auto; 
position: relative;

来源

2010-11-17 19:08:02

中心文本与背景CSS“形状”

回答

相关问题