道具在React组件中的样式位置

Question

如何将“文本”设置为带有以下代码的蓝色圆圈：

type WizardCircleProps = {
  wizardCircleContent: React.ReactNode;
};

const circleStyle = {
  background: '${props => props.theme.palette.active}',
  borderRadius: '50px',
  width: '32px',
  height: '32px',
  margin: '18px',
};

export class WizardCircle extends Component<WizardCircleProps> {

  render() {
    const { wizardCircleContent } = this.props;

  return (
    <div style={circleStyle}>
      **{wizardCircleContent}**
    </div>
  );
  }
}

给我

我的目标是：

我只想将“文字”或类似文字居中于圆心。

Answer 1

这是一个css问题。

请注意line-height和text-align。

#round {
  background: #00f;
  border-radius: 50px;
  color: white;
  width: 32px;
  height: 32px;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
};

<div id="round">1</div>