如何实现页眉侧边栏图标与Logo的对齐？

Hey there! Let's tackle that alignment problem between your sidebar toggle icon and logo, plus the unwanted header height increase. Here's what's going wrong and how to fix it:

Key Issues in Your Current Code #

• The .heading container doesn't have a proper layout to align its child elements (toggle icon and logo) vertically.
• There's invalid CSS in .container .heading a (syntax error in the transition property, plus unnecessary position: fixed that disrupts layout) — and this selector doesn't even target any element in your HTML heading.
• No vertical alignment rules mean elements default to baseline, causing the misalignment.

Corrected Code #

Updated CSS #

* { 
  margin: 0; 
  padding: 0; 
  font-family: 'Raleway-Bold'; 
}
.container{ 
  width: 100%; 
  height: 100vh; 
  background-position: center; 
  background-size: cover; 
  background-repeat:no-repeat; 
  background-attachment: fixed; 
}
/* Use flexbox to align header items vertically */
.container .heading { 
  display: flex;
  align-items: center; /* Vertically centers the icon and logo */
  overflow: hidden; 
  background-color: #c0392b; 
  padding: 15px 20px; /* Reduced padding to avoid excessive height */
}
/* Style the sidebar toggle icon */
.container .heading .toggle-btn {
  font-size: 30px;
  cursor: pointer;
  margin-right: 1rem; /* Add space between icon and logo */
  color: white;
}
/* Ensure logo doesn't stretch the header */
.container .heading img {
  height: 60px; /* Adjust to your desired logo size */
  object-fit: contain;
}
i { 
  display: inline-block; 
  margin-right: 1em; 
}
.sidenav { 
  height: 100%; 
  width: 0%; 
  position: fixed; 
  z-index: 1; 
  top: 0; 
  left: 0; 
  background-color: #585756; 
  overflow-x: hidden; 
  transition: 0.5s; 
  padding-top: 40px; 
}
.sidenav a { 
  padding: 8px 8px 8px 25px; 
  text-decoration: none; 
  font-size: 15px; 
  color: #cfc3c3; 
  display: block; 
  transition: 0.3s; 
  letter-spacing: 1px; 
  font-weight: 500; 
  line-height: 40px; 
  border-bottom: 1px solid rgba(150, 153, 151, 0.1); 
}
.sidenav a:hover { 
  color: #FFFFFF; 
}
.sidenav .closebtn { 
  position: absolute; 
  top: 0px; 
  right: 25px; 
  font-size: 40px; 
  margin-left: 100px; 
}
.dropdown-container { 
  display: none; 
  padding-left: 10px; 
}
.fa-caret-down { 
  float: right; 
  padding: 10px 0px; 
}
.active { 
  background-color: #c0392b; 
}
@media screen and (max-height: 450px) { 
  .sidenav {padding-top: 15px;} 
  .sidenav a {font-size: 18px;} 
}

Updated HTML #

<body>
<div class="container">
  <div class="heading">
    <span class="toggle-btn" onclick="openNav()">&#9776;</span>
    <img src="images/ChiLin-White.png" alt="ChiLin Logo">
  </div>
  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <ul>
      <li><a href="#"><i class="fas fa-home"></i>Home</a></li>
      <li><a href="#"><i class="fas fa-brain"></i>Heisig Method</a></li>
      <li><a href="#"><i class="fas fa-book-reader"></i>Lessons</a></li>
      <li><a href="#"><i class="fas fa-sticky-note"></i>Homophones</a></li>
      <li class="dropdown-btn"><a href="#"><i class="fas fa-tools"></i>Tools<i class="fas fa-caret-down"></i></a></li>
      <ul class="dropdown-container">
        <li><a href="#">Dictionary</a></li>
        <li><a href="#">Flashcard</a></li>
        <li><a href="#">Calligraphy generator</a></li>
        <li><a href="#">Pinyin Chart (Pronunciation)</a></li>
      </ul>
      <li><a href="#"><i class="fas fa-address-book"></i>Contact</a></li>
    </ul>
  </div>
</div>
<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
  document.getElementById("mySidenav").style.width = "0px";
}
</script>
<script>
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}
</script>
</body>

What Changed? #

• Added display: flex and align-items: center to .heading to vertically center the toggle icon and logo.
• Removed the invalid .container .heading a CSS rule since it wasn't targeting any element.
• Added a class .toggle-btn to the sidebar icon for cleaner styling control.
• Set a fixed height on the logo with object-fit: contain to prevent it from stretching the header.
• Reduced header padding to avoid unnecessary height while keeping it visually balanced.

This should fix the misalignment and extra header height issue completely!

内容的提问来源于stack exchange，提问作者RC Minerva