Bagaimanakah saya boleh membuat imej muncul di tengah-tengah pengepala?

Question

Pertama sekali, kod saya adalah berdasarkan 3 fail, HTML, CSS dan JS, perlu diingatkan bahawa saya menggunakan rangka kerja Bootstrap 5.1.3 untuk mencipta HTML.

Masalah saya, pertama sekali, logo jenama pakaian yang saya gunakan sebagai kajian kes tidak berpusat, saya telah mencuba segala-galanya untuk menjadikannya berpusat pada tajuk, namun, saya tidak dapat mencapainya. Saya juga menambah bahawa saya mempunyai enjin carian drop down, iaitu, saya menekan ikon carian dan ia menunjukkan kotak di sebelah kanan untuk input teks, baik, apabila itu berlaku dan kotak tersebut muncul, logo itu juga muncul untuk berpusat, ia menatal lebih ke kiri (kerana saya mencari di sebelah kanan), dan saya tidak tahu apa yang sedang berlaku.

Saya tahu ini berkemungkinan besar disebabkan oleh bekas, tetapi saya juga telah cuba mengecilkan bekas logo dan memusatkannya, tetapi tidak berjaya, ia tetap sama. Saya harap anda boleh membantu saya. Saya cuba mengusahakan rangka kerja ini, tetapi butiran kecil ini tidak membantu saya.

// 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. Saya cuba memusatkan logo seperti biasa
2. Saya cuba kurangkan bekas logo
3. Saya cuba membuat semula kod daripada 0

Saya telah mencuba beberapa kali untuk menukar CSS untuk memusatkan logo, atau untuk mengurangkan bekas logo, tetapi masih tanpa sebarang hasil, logo sentiasa berada di bahagian yang sama.

Apabila saya melakukan ini, ya saya juga berjaya memusatkan logo, hanya untuk mendapati bahawa termasuk bertindih tajuk sehingga saya tidak dapat memilih mana-mana bahagian tajuk.

Answer 1

Pertama, anda harus mencuba bermula dari .navbar-brand 中删除 width: 100%;.

Anda juga harus menambah kod berikut:

.navbar-nav {
  flex: 1;
}

Pusatkan semua pautan navigasi tetapi berhati-hati kerana semua elemen akan mengambil ruang yang tinggal di antara mereka dan kod ini:

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

Halang logo daripada bergerak apabila input carian muncul.