Javascript React引导navbar1

我是react新手，我使用react引导作为模板。我专门使用react的导航栏组件。我试图把正文放在中间。然而，情况是这样的：

以下是相同的代码：

import React,{Components} from 'react';
import Navbar from 'react-bootstrap/Navbar'
export class NavbarTop extends React.Component{
    render(){
        return(
            <div>
            <Navbar bg="dark" variant="dark">
    <Navbar.Brand href="#home">
      <img
        alt=""
        src="../img/TataLogo.png"
        width="30"
        height="30"
        className="d-inline-block align-top"
      />{' '}
      
    </Navbar.Brand>
    <Navbar.Brand href="#home">
    Best Practices Management System
    </Navbar.Brand>
  </Navbar>
  </div>
  );
}
}

export default NavbarTop;

import React，{Components}来自'React'；
从“react引导/Navbar”导入Navbar
导出类NavbarTop扩展React.Component{
render（）{
返回(
{' '}
最佳做法管理系统
);
}
}
导出默认NavbarTop；

请帮我做这件事。我用的是时尚中心，但它不起作用

---

我想集中最佳实践管理系统

您可以使用bootstrap提供的类

m-auto

，这将使标题水平居中

请参阅代码片段

    return (
      <div>
        <Navbar bg="dark" variant="dark">
          <Navbar.Brand href="#home">
          <img
            alt=""
            src="../img/TataLogo.png"
            width="30"
            height="30"
            className="d-inline-block align-top"
          />{' '}

        </Navbar.Brand>
        <Navbar.Brand href="#home" className="m-auto">
            Best Practices Management System
        </Navbar.Brand>
      </Navbar>
    </div>
  );

返回(
{' '}
最佳做法管理系统
);

将CSS类“文本中心”添加到周围的div或Navbar.Brand中

---

是的，虽然我想将徽标移到一侧，但它仍然有效