具有背景CSS“形状”的中心文本 [英] Center text with background CSS "shape"

问题描述

我试图创建一个取消链接，该链接看起来像一个带有红色圆圈的x。

I'm trying to create a "cancel" link that looks like an x with a solid red circle behind it.

这里是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 或底部似乎不起作用...

How do I move the x so that it is centered within the circle? Changing the margin-top or bottom doesn't seem to work...

推荐答案

如果您相对定位您的标签，您可以修复：

If you relatively position your a tag you can fix it:

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

  position:relative; top:-2px;
}

调整 top 价值对你的喜好。

这篇关于具有背景CSS“形状”的中心文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！