如何讓影像出現在頁首的中央？
首先，我的程式碼是基於 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>
- 我嘗試正常地將徽標居中
- 我嘗試減少徽標的容器
- 我嘗試從 0 開始重做程式碼
我已經多次嘗試更改CSS以使徽標居中，或減少徽標的容器，但仍然沒有任何成果，徽標始終保持在同一部分。
當我這樣做時，是的，我還設法將徽標居中，結果發現包含與標題重疊，因此無法選擇標題的任何部分。
