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

Question

我在字母等级周围画有边框半径，但并非所有字母都以其边框半径为中心。例如，字母D看起来最糟：

有人知道确保边框半径内的文本始终居中吗？ （如果需要，此应用会使用react。）

这是它的CSS：

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

和html虽然我怀疑这有多重要：

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

在css /脚手架中存在一些问题，因为在正确居中的项目中隔离了剪切结果：

 .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

这是你想要的吗？

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>