Question

我正在尝试创建一个“取消”链接，其背后看起来像一个带有红色圆圈的x。

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

Answer 1

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

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

  position:relative; top:-2px;
}

根据您的喜好调整top值。

Answer 2

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

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

Answer 3

我正在做类似的事情，并使用以下内容集中我的文字：

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

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

3 个答案: