Wie kann ich dafür sorgen, dass das Bild in der Mitte der Kopfzeile erscheint?

Question

Zuallererst basiert mein Code auf 3 Dateien, einem HTML, einem CSS und einem JS. Es sollte beachtet werden, dass ich das Bootstrap 5.1.3-Framework verwende, um den HTML-Code zu erstellen.

Mein Problem ist zunächst einmal, dass das Logo der Bekleidungsmarke, die ich als Fallstudie verwende, nicht zentriert ist. Ich habe alles versucht, um es im Titel zentriert zu machen, aber es gelingt mir nicht. Ich habe auch hinzugefügt, dass ich eine Dropdown-Suchmaschine habe, das heißt, ich drücke auf das Suchsymbol und es wird rechts ein Feld für die Texteingabe angezeigt. Wenn das passiert und dieses Feld erscheint, erscheint auch das Logo In der Mitte scrollt es weiter nach links (weil ich rechts suche) und ich weiß nicht, was zum Teufel los ist.

Ich weiß, dass das höchstwahrscheinlich am Container liegt, aber ich habe auch versucht, den Logo-Container zu verkleinern und zu zentrieren, aber ohne Erfolg, er bleibt genau gleich. Ich hoffe ihr könnt mir helfen. Ich versuche, an diesem Framework zu arbeiten, aber dieses kleine Detail bringt mich nicht weiter.

// 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. Ich habe versucht, das Logo normal zu zentrieren
2. Ich habe versucht, den Container des Logos zu verkleinern
3. Ich habe versucht, den Code von 0 zu wiederholen

Ich habe mehrmals versucht, das CSS zu ändern, um das Logo zu zentrieren, oder den Container des Logos zu verkleinern, aber immer noch ohne Erfolg, das Logo bleibt immer im gleichen Teil.

Als ich das tat, gelang es mir zwar auch, das Logo zu zentrieren, musste jedoch feststellen, dass das Include den Titel überlappte, sodass kein Teil des Titels ausgewählt werden konnte.

Answer 1

首先，您应该尝试从 .navbar-brand 中删除 width: 100%;。

您还应该添加以下代码：

.navbar-nav {
  flex: 1;
}

使所有导航链接居中，但要小心，因为所有元素都会占用它们之间的剩余空间，并且此代码：

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

防止徽标在搜索输入出现时移动。