flexbox - 无法在页面的垂直和水平中心对齐 react-bootstrap 组件
问题描述
我一直在尝试将我的 Card 组件放置在页面的垂直和水平中心,但它只垂直对齐而不是水平对齐。我尝试将容器的高度增加到 100 rem,然后在中心对齐项目,但似乎没有任何效果。
<div>
<Container className="display-flex">
<Row className="justify-content-center">
<Col className="align-item-center">
<Card style={{ width: '19rem'}}>
<Card.Header> Mark Attendence </Card.Header>
<Card.Body> </Card.Body>
</Card>
</Col>
</Row>
</Container>
</div>
解决方案
推荐阅读
- python - 如何将 csv 数据添加到我的 Hashtable?Python
- arrays - 将两个列表与字符串数据进行比较?
- c++ - 如何为 gtkmm 应用程序创建 CMakeLists.txt?
- java - 无法通过 url 将图像下载到我在 android 10 中的手机中
- html - 无法创建网页布局设计
- cassandra - 考虑到消息传递应用程序,Cassandra 需要 IN 子句
- html - 媒体查询没有被触发并且文本没有被包装
- c# - 为什么在返回的 lambda 函数中引用局部变量时不收集垃圾?
- linux-kernel - 为什么 Linux 内核中没有 net.ipv6.fib_multipath_use_neigh
- snowflake-cloud-data-platform - 无法选择作为 SQL 关键字的列名