React Component 中 props 的样式 position

Question

How to style 'Text' to blue circle having following code:

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

Gave me:

My goal is to have:

I just want to center the 'Text' or similar text to the center of circle.

Answer 1

It's a css problem.

Pay attention to line-height and 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>