我需要主页按钮出现在中间

Question

我是 CSS 新手，我需要帮助。我的问题是，无论我做什么，主页按钮都不会出现在屏幕中间。你能帮我吗？这是我的代码。顺便说一句，我正在使用 Bootstrap 5 类，但尽管我尝试用这些类来修复它，但我认为我需要用 CSS 来修复它。谢谢您的帮助。

我尝试检查该网站上的一些帖子，但没有一个解决方案有效。我也尝试用 ChatGPT 修复它，但没有成功。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-success" aria- 
label="Third navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Book Finder</a>
<button class="navbar-toggler" type="button" data-bs- 
toggle="collapse" data-bs-target="#navbarsExample03" aria- 
controls="navbarsExample03" aria-expanded="false" aria-label="Toggle 
navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-center">
    <ul class="navbar-nav mb-2 mb-sm-0 ">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" [routerLink]="['/homepage']">Home</a>
      </li>
    </ul>
  </div>
</div>

Answer 1

我的解决方法是使徽标（在本例中为

Book Finder

）具有绝对位置，然后相对于父级（导航栏）相应地定位它。然后对于

navbar-nav

，您可以将

display: flex

与

justify-content: center

一起应用。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-success" aria- 
label="Third navbar example">
<div class="container-fluid">
<a class="navbar-brand position-absolute" href="#">Book Finder</a>
<button class="navbar-toggler" type="button" data-bs- 
toggle="collapse" data-bs-target="#navbarsExample03" aria- 
controls="navbarsExample03" aria-expanded="false" aria-label="Toggle 
navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-center">
    <ul class="navbar-nav mb-2 mb-sm-0 ">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" [routerLink]="['/homepage']">Home</a>
      </li>
    </ul>
  </div>
</div>