如何解决如何使用内联样式将 React 组件水平和垂直居中
我正在尝试使用内联样式在 React JS 中将基本用户登录居中,但我似乎不知道该怎么做。我正在使用 React Bootstrap,目前我已经设法使用 flexBox 使表单部分居中,但它仍然出现在页面顶部。我需要做什么才能让它出现在中间?
请参阅当前问题的附加图片。
const LoginPage = () => {
return (
<Container >
<Row
style={{
display: 'flex',alignItems: 'center',justifyContent: 'center',marginTop:'5px'
}}
>
Enter API Key:
</Row>
<Row
style={{
display: 'flex',marginTop:'5px'
}}
>
<Form>
<Form.Control
id='apiKeyString'
name='apiKey'
size='sm'
style={{ width: '250px' }}
onChange={(e) => setApiKey(e.target.value)}
></Form.Control>
</Form>
</Row>
<Row
style={{
display: 'flex',marginTop:'5px'
}}
>
<Button type='submit' onClick={submitApiKey} size='sm'>
Submit
</Button>
</Row>
</Container>
);
};
解决方法
要垂直居中,您必须将容器内联样式设置为以下内容:
{
height: '100vh',display: 'flex',flexDirection: 'column',alignItems: 'center',justifyContent: 'center',}
完成此操作后,您可能可以删除所有其他样式。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。