Wie kann ich dafür sorgen, dass das Bild in der Mitte der Kopfzeile erscheint?
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>
- Ich habe versucht, das Logo normal zu zentrieren
- Ich habe versucht, den Container des Logos zu verkleinern
- 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.
