How to align an item in navbar to the center in HTML-CodePudding

I would like to move this h5 element such that it always hangs in the middle of the navbar. How can I control that. This is the HTML from a shared layout file that will be shared across all pages. Thank you

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav >
  <div >
    <a  asp-area="" asp-controller="Home" asp-action="Index">ProjectX1</a>

    <h5 >@ViewData["NavbarTitle"]</h5>

    <div >
      <partial name="_LoginPartial.cshtml" />
    </div>
  </div>
</nav>

CodePudding user response：

you can use flexbox:

nav > .container{
  display: flex;
  justify-content: space-between;
}

CodePudding user response：

You only need to remove navbar-collapse of <div >...</div>.

CodePudding user response：

 <div   > 
        <h5 >@ViewData["NavbarTitle"]</h5>
        </div>