如何将导航栏中的项目与 HTML 的中心对齐

Question

我想移动这个h5元素，使其始终挂在导航栏的中间。 我怎么能控制它。 这是来自共享布局文件的 HTML，它将在所有页面之间共享。 谢谢

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <div class="container"> <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ProjectX1</a> <h5 class="display-6 navbar-text">@ViewData["NavbarTitle"]</h5> <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse"> <partial name="_LoginPartial.cshtml" /> </div> </div> </nav>

Answer 1

您可以使用 flexbox：

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

Answer 2

您只需要删除 <div class=" navbar-collapse <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">...</div> 。

Answer 3

 <div class="w-100 d-flex justify-content-center "  > 
        <h5 class="display-6 navbar-text text-center">@ViewData["NavbarTitle"]</h5>
        </div>