如何在react-bootstrap中将容器居中？

Question

我正在使用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：

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

Answer 1

尝试这个：

.roomfac{
    display: flex;
    width: 60%;
    justify-content:center
    margin:0 auto;
}