javascript - 如何使文本在边框半径内居中？

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>