“Antd”库中的组件垂直和水平居中不起作用
“Antd”库中的组件垂直和水平居中不起作用
提问于 2021-11-18 07:34:29
我有一个奇怪的问题，我不能在我的屏幕上垂直居中一行。我的卡片是水平居中，而不是垂直居中。我怎么才能做到这一点呢？我使用了具有align='middle'的行组件来垂直对齐，但它不起作用
下面是我的实现：
<Row align='middle' justify='center'>
<Col span={18}>
<Card>
{/* <img className='login-logo' src={logo} alt='logo' /> */}
<Text size='30px' type='BOLD'>
QIFF DASHBOARD
</Text>
<Form name='login' onFinish={formik.handleSubmit}>
<Form.Item>
<Input
id='email'
name='email'
label='Email'
placeholder='Email'
type='email'
autoComplete='new-email'
onBlur={formik.handleBlur}
onChange={formik.handleChange}
value={formik.values.email}
/>
{formik.errors.email ? <Text>{formik.errors.email}</Text> : null}
</Form.Item>
<Form.Item>
<Input
id='password'
name='password'
placeholder='Password'
type='password'
autoComplete='new-password'
onBlur={formik.handleBlur}
onChange={formik.handleChange}
value={formik.values.password}
/>
{formik.errors.password ? <Text>{formik.errors.password}</Text> : null}
</Form.Item>
<div className='submit-button'>
<Button
htmlType='submit'
onClick={formik.handleSubmit}
style={{ width: '100%', backgroundColor: '#f85940', color: 'white' }}
>
Sign in
</Button>
</div>
</Form>
</Card>
</Col>
</Row>回答 1
Stack Overflow用户
发布于 2021-11-18 08:50:30
<Row align='middle' justify='center'></Row>据推测，Row标记不会设置属性display:flex
所以justify='center'是无效的
可以使用以下解决方案：
1个、子元素(需要垂直居中)
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);2个、<Row style="display:flex"></Row>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70016033
复制相关文章
相似问题
腾讯云开发者
