Question

我是React的新手，正在使用React bootstrap作为模板。我专门使用react的navbar组件。我试图将文本居中。但是它是这样的：

以下是同一代码：

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;

请帮助我。我使用样式对齐中心，但是没有用

我想以最佳做法管理系统为中心

Answer 1

您可以使用m-auto，它是bootstrap提供的类，它将使标题水平居中

查看摘要

    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>
  );

Answer 2

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

https://getbootstrap.com/docs/4.0/utilities/text/

React Bootstrap导航栏1

2 个答案: