React 水平居中 Bootstrap

Question

检查了文档，我的代码仍然不会水平居中。

import React from 'react';
import '../css/Header.css';
import Container from 'react-bootstrap/Container';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';

const Header = () => {
    return (
        <header className='d-flex justify-content-center header' style={{ backgroundImage: `url("/images/header.png")` }}>
          <Container fluid>
          <Row>
            <Col>
            <div className={'website-title'}>
                My Website
                <div className={'bracket bracket-1'}></div>
                <div className={'bracket bracket-2'}></div>
                <div className={'bracket bracket-3'}></div>
                <div className={'bracket bracket-4'}></div>
            </div>
            </Col>
          </Row>
        </Container>
        </header>
    )
}

export default Header;

我正在使用文档建议的“d-flex justify-content-center”class。知道我在这里做错了什么吗？

Answer 1

将其放在 div 中，页眉的边距应居中

Answer 2

您可以尝试将 <header> 放在 <Container>

中

React 水平居中 Bootstrap

horizontal centering with React Bootstrap

reactjs

react-bootstrap