如何讓影像出現在頁首的中央？

Question

首先，我的程式碼是基於 3 個文件，一個 HTML、一個 CSS 和一個 JS，應該注意的是，我正在使用 Bootstrap 5.1.3 框架來建立 HTML。

我的問題是，首先，我作為案例研究的服裝品牌的徽標不居中，我已嘗試一切方法使其在標題中居中，但是，我無法實現它。我還補充說，我有一個下拉搜尋引擎，也就是說，我按下搜尋圖標，它會在右側顯示一個用於文字輸入的框，好吧，當發生這種情況並且出現所述框時，還會出現徽標為了不居中，它會向左滾動更多（因為我在右側進行搜索），並且我不知道到底發生了什麼。

我知道這很可能是由於容器造成的，但我也嘗試過縮小徽標容器並將其居中，但是沒有任何結果，它保持完全相同。我希望你能幫助我。我正在嘗試研究這個框架，但是這個小細節並沒有讓我繼續前進。

// selecciona el icono de búsqueda y el campo de búsqueda
const searchIcon = document.querySelector('.fa-search-icon');
const searchField = document.querySelector('.search-container input[type="text"]');

// agrega un event listener al icono de búsqueda
searchIcon.addEventListener('click', function() {
  // muestra u oculta el campo de búsqueda
  searchField.style.display = searchField.style.display === 'none' ? 'block' : 'none';
});

.navbar {
  height: 72px;
  background-color: #fff;
  margin-bottom: 0;
  position: relative;
  justify-content: center;
}

.nav-link {
  display: flex;
  justify-content: center;
}


/* Estilos para los enlaces del header */

.navbar-nav li a {
  color: #333;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  text-align: center;
}


/* Estilos para el logo */

.navbar-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}


/* Estilos para la imagen del logo */

.navbar-brand img {
  height: 50px;
  width: auto;
}

.navbar-center {
  max-width: 300px;
  /* ajustar el ancho máximo según tus necesidades */
  margin: 0 auto;
  /* centrar horizontalmente */
}


/* Estilos para el botón de hamburguesa en dispositivos móviles */

.navbar-toggler {
  border-color: #333;
}

.navbar-toggler-icon {
  background-color: #333;
}


/* Estilos para los enlaces Contact Us y Cart en pantallas pequeñas */

@media (max-width: 767px) {
  /* Estilos para la barra de búsqueda en pantallas pequeñas */
  .navbar-form {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: 10px;
    border: none;
  }
  .navbar-form .form-control {
    border-radius: 0;
    background-color: #f2f2f2;
    color: #333;
    border: none;
    width: 100%;
    max-width: 300px;
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    margin-right: 0;
  }
  .navbar-form .input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px;
    margin-left: 10px;
    border-radius: 0;
  }
  .navbar-form .input-group-text:hover,
  .navbar-form .input-group-text:focus {
    background-color: #000;
    color: #fff;
  }
}


/* Animación para desplazar el ícono a la izquierda */

.search-container input[type="text"] {
  display: none;
}

.search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
      <div class="collapse navbar-collapse" id="navbarContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item"><a class="nav-link" href="#">Men</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Women</a></li>
        </ul>

        <a class="navbar-brand" href="#">
          <img src="logo.png" alt="Logo" style="max-width: 146px;">
        </a>

        <ul class="navbar-nav ms-auto">
          <li class="nav-item search-container">
            <input type="text" placeholder="Buscar...">
            <a class="nav-link" href="#"><i class="fa fa-search fa-search-icon"></i></a></li>
          <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-user"></i></a></li>
          <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-star"></i></a></li>
          <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-envelope-open"></i></a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

1. 我嘗試正常地將徽標居中
2. 我嘗試減少徽標的容器
3. 我嘗試從 0 開始重做程式碼

我已經多次嘗試更改CSS以使徽標居中，或減少徽標的容器，但仍然沒有任何成果，徽標始終保持在同一部分。

當我這樣做時，是的，我還設法將徽標居中，結果發現包含與標題重疊，因此無法選擇標題的任何部分。

Answer 1

首先，您應該嘗試從 .navbar-brand 中刪除 width: 100%;。

您還應該添加以下程式碼：

.navbar-nav {
  flex: 1;
}

使所有導航連結居中，但要小心，因為所有元素都會佔用它們之間的剩餘空間，並且此程式碼：

.navbar-collapse {
  flex-grow: 1;
}

防止徽標在搜尋輸入出現時移動。