Блог

Я новичок в react и использую React bootstrap для шаблона.Я специально использую компонент navbar в 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;
  

Пожалуйста, помогите мне в этом. Я использовал style justify center, но это не сработало

Я хотел сосредоточить систему управления лучшими практиками

Вы можете использовать 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>
  );
  

Добавьте класс CSS «text-center» в окружающий div или на панель навигации.Бренд.

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