html - 如何在 react-bootstrap 中将容器居中?
问题描述
我正在使用 react-bootstrap 开发一个网站,并且我有一个容器,其宽度需要更改为 60%,并且仍然居中。我更改了宽度,但找不到使容器居中的方法。我怎样才能做到这一点?
这是我的代码:
import {Row, Col, Container, Button} from "react-bootstrap"
import '../CSS/Room.css'
const Room = () => {
return (
<>
<Container fluid>
<Row className="roomfac fontReg">
<Col lg={3} className="text-center">
<img src="./Images/logofridge.png" alt="Logo 1"/>
<h3 className="fontSB">Fridge</h3>
</Col>
<Col lg={3} className="text-center">
<img src="./Images/logoAC.png" alt="Logo 2"/>
<h3 className="fontSB">AC</h3>
</Col>
<Col lg={3} className="text-center">
<img src="./Images/logowifi2.png" alt="Logo 3"/>
<h3 className="fontSB">Wifi</h3>
</Col>
<Col lg={3} className="text-center">
<img src="./Images/logotv.png" alt="Logo 4"/>
<h3 className="fontSB">TV</h3>
</Col>
</Row>
</Container>
</>
)
}
export default Room
这是我的 CSS:
.roomfac {
display: flex;
widtH: 60%;
margin: auto;
}
解决方案
尝试这个:
.roomfac{
display: flex;
width: 60%;
justify-content:center
margin:0 auto;
}
推荐阅读
- javascript - SVG:转换转义的 SVG 字符串并附加到正文什么都不做
- android-studio - 理解代码中语句的含义 - activityCallback = (ToolbarListener) context
- c++ - 是否可以从现有基类动态分配派生类所需的额外内存?
- angular - Angular 7 HttpInterceptor 在库项目中不起作用
- sql-server - 如何编写 WHERE 子句来满足 SSRS 报告上的可选参数?
- javascript - 运行甜蜜警报脚本时如何运行另一个 JavaScript 函数
- c - 获取C中十六进制颜色的补色
- javascript - 前端从后端获取错误数据
- c# - Regex.Replace 突然在 LinqPad 输出窗口中生成一个空格
- c# - Web-API 版本控制不适用于默认版本