[英]Styling position of props in React Component
如何将“文本”设置为具有以下代码的蓝色圆圈:
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>
);
}
}
给我:
我的目标是:
我只想将“文本”或类似文本居中到圆心。
这是一个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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.