Comment faire apparaître l'image au centre de l'en-tête ?

Question

Tout d'abord, mon code est basé sur 3 fichiers, un HTML, un CSS et un JS, il est à noter que j'utilise le framework Bootstrap 5.1.3 pour créer le HTML.

Mon problème est, tout d'abord, que le logo de la marque de vêtements que j'ai comme étude de cas n'est pas centré, j'ai tout essayé pour le centrer dans le titre, cependant, je n'y parviens pas. J'ai également ajouté que j'ai un moteur de recherche déroulant, c'est-à-dire que j'appuie sur l'icône de recherche et qu'il affiche une zone à droite pour la saisie de texte, eh bien, lorsque cela se produit et que cette zone apparaît, le logo apparaît également Pour ne pas l'être. centré, ça défile plus vers la gauche (car je cherche à droite), et je ne sais pas ce qui se passe.

Je sais que cela est probablement dû au conteneur, mais j'ai également essayé de réduire le conteneur du logo et de le centrer, mais en vain, il reste exactement le même. J'espère que vous pouvez m'aider. J'essaie de travailler sur ce framework, mais ce petit détail ne me fait pas avancer.

// 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. J'ai essayé de centrer le logo normalement
2. J'ai essayé de réduire le conteneur du logo
3. J'ai essayé de refaire le code de 0

J'ai essayé plusieurs fois de changer le CSS pour centrer le logo, ou de réduire le contenant du logo, mais toujours sans résultat, le logo reste toujours dans la même partie.

Quand j'ai fait cela, oui, j'ai également réussi à centrer le logo, seulement pour constater que l'inclusion chevauchait le titre, donc aucune partie du titre ne pouvait être sélectionnée.

Answer 1

Tout d’abord, vous devriez essayer à partir de .navbar-brand 中删除 width: 100%;.

Vous devez également ajouter le code suivant :

.navbar-nav {
  flex: 1;
}

Centrez tous les liens de navigation mais soyez prudent car tous les éléments occuperont l'espace restant entre eux et ce code :

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

Empêcher le logo de bouger lorsque la saisie de recherche apparaît.