How to center text within a border-radius?

Question

I have a border-radius circling a letter grade but not all of the letters appear centered within their border radius. For example the letter D looks the worst:

Does anyone know of a way to make sure the text inside of the border radius always appears centered? (This app uses react if it matters.)

Here is the css for it:

const buttonStyle = {
  width: 40,
  height: 40,
  borderRadius: 100,
  borderWidth: 2,
  borderColor: stylesColors.grey,
  padding: 0,
  marginRight: 15,
  fontSize: 27,
  textAlign: 'center',
  verticalAlign: 'middle',
  display: 'table-cell'
};

And the html though I doubt it matters much:

grades.map((grade, index) => {
  return (
    <Track key={index}>
      <Button
        className={(grade.letter === value.grade) ? 'green-button' : null}
        style={buttonStyle}
        id={`reviews--rating-${ratingTypeName}--${grade.letter}`}
        key={index}
        data-track-autopopulated={false}
        data-track-rating-type={`${ratingTypeName.toLowerCase()}Grade`}
        data-track-selected-grade={grade.letter}
        data-track-draft-review-id={draftReviewId}
        data-track-service-provider-id={serviceProviderId}
        onClick={() => this.handleSelect(grade.letter)}>
        {grade.letter}
      </Button>
    </Track>
  );
})

I wonder if this is related to the font? When I convert your code to html/css (https://jsfiddle.net/rcn6oue0/1/) and use the default system font on macOS, most of the characters look centred except for D which is slightly off - though less so than your screen shot. — Turnip, May 03 '19 at 13:43
Possible duplicate of [Vertically and horizontally centering text in circle in CSS (like iphone notification badge)](https://stackoverflow.com/questions/4801181/vertically-and-horizontally-centering-text-in-circle-in-css-like-iphone-notific) — Mosè Raguzzini, May 03 '19 at 14:31
Aren't your attributes there incorrect syntax for react? I'm probably wrong, but I've never seen hyphens used to set props before. — gilbert-v, May 03 '19 at 15:07

score 3 · Answer 1 · answered May 03 '19 at 13:39

3

There are some issues in your css/scaffolding as isolating the snipped results in correctly centered items:

 .centerRound{
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border: 2px solid grey;
  padding: 0px;
  margin-right: 15;
  font-size: 27;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  font-size:35px;
  }

<div class="centerRound">A</div>
<div class="centerRound">B</div>
<div class="centerRound">C</div>
<div class="centerRound">D</div>

answered May 03 '19 at 13:39

Mosè Raguzzini

15,399
1
31
43

Yes it is, mate – Mosè Raguzzini May 03 '19 at 13:45
B and D are both off centre for me. – Turnip May 03 '19 at 13:46
4

The letters are in fact centered. This is just an illusion because of the font and letter shape. +1 – DreamTeK May 03 '19 at 13:47
If you upscale your font to 34px in your snippets, it will seems too mate. But it is centered. – Mosè Raguzzini May 03 '19 at 13:47
Is the only thing that you did differently was to change the font size to 35?? But it doesn't look centered anyway. I need it to actually LOOK centered and when I look at B and D they look off still. – FairyQueen May 03 '19 at 13:53
I changed the font size of YOUR snippet, and it was "not centered" (indeed centered) as mine – Mosè Raguzzini May 03 '19 at 14:12
3

Try highlighting the letters. You will see that they are correctly centered, it's an illusion as @DreamTeK says. – gilbert-v May 03 '19 at 15:09

score 2 · Accepted Answer · edited May 03 '19 at 13:47

2

is this what you want?

div {
  height: 30px;
  width: 30px;
  border: 1px solid black;
  border-radius: 50%;
  display: inline-block;
}

span {
  display: inline-block;
  margin-top: 50%;
  margin-left: 50%;
  transform: translate(-50%, -50%);
}

<div>
  <span>
  A</span>
</div>

<div>
  <span>
  B</span>
</div>

<div>
  <span>
  C</span>
</div>

<div>
  <span>
  D</span>
</div>

edited May 03 '19 at 13:47

Turnip

35,836
15
89
111

answered May 03 '19 at 13:42

Xenio Gracias

2,728
1
9
16

1

Please answer why this was downvoted. In my browser, the font looks positioned correctly. – Jennifer Goncalves May 03 '19 at 13:45
I have added the D button to your example an it appears off-centre. – Turnip May 03 '19 at 13:48
Highlight the letter "D", you will see that it is in fact centered correctly. +1 – gilbert-v May 03 '19 at 15:09

How to center text within a border-radius?

2 Answers2