我正在尝试使用内联样式在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',
alignItems: 'center',
justifyContent: 'center',
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',
alignItems: 'center',
justifyContent: 'center',
marginTop:'5px'
}}
>
<Button type='submit' onClick={submitApiKey} size='sm'>
Submit
</Button>
</Row>
</Container>
);
};
Row
包装在一个 div 中,然后在 div 上设置样式。 - sandrooco