如何在边界半径内居中放置文本？

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

Answer 1

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> 

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