Center text with background CSS "shape"

Question

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

Here is the 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;
}

This is the HTML code:

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

It ends up looking like this: .

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...

Answer 1

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

Adjust the top value to your liking.

Answer 2

Your font must accomodate characters like É, q, X and x, etc and still be displayed over background whatever the height of the character is.

I found that using an X (or text-transform: uppercase; obviously) and font-family: monospace; was an improvement with your code, though not perfect. Solution provided by mhr is useful even with a monospace font.