CODEWITHSUNDEEP
htmlcss
boo-urns
boo-urns

Reputation: 10376

Center text with background CSS "shape"

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: alt text http://www.freeimagehosting.net/uploads/472563dfe4.png.

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

Upvotes: 0

Views: 10541

Answers (3)

Tony Lenzi
Tony Lenzi

Reputation: 4209

I am doing something similar, and using the following to center my text:

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

Upvotes: 0

FelipeAls
FelipeAls

Reputation: 22171

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.

Upvotes: 1

mVChr
mVChr

Reputation: 50185

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.

Upvotes: 3

Related Questions