Стилизация позиции реквизита в React Component

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

Дали мне:

Myцель состоит в том, чтобы:

Я просто хочу центрировать текст или подобный текст по центру круга.

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>