[英]How to align an item in navbar to the center in HTML
I would like to move this h5 element such that it always hangs in the middle of the navbar.我想移动这个h5元素,使其始终挂在导航栏的中间。 How can I control that.我怎么能控制它。 This is the HTML from a shared layout file that will be shared across all pages.这是来自共享布局文件的 HTML,它将在所有页面之间共享。 Thank you谢谢
<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>
you can use flexbox:您可以使用 flexbox:
nav > .container{
display: flex;
justify-content: space-between;
}
You only need to remove navbar-collapse
of <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">...</div>
.您只需要删除 <div class=" navbar-collapse
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">...</div>
。
<div class="w-100 d-flex justify-content-center " >
<h5 class="display-6 navbar-text text-center">@ViewData["NavbarTitle"]</h5>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.