调整尺寸时如何使Logo与导航栏（Navbar）对齐？

问题描述 #

我是编程新手，用HTML和CSS制作页面时，无法让Logo与导航栏文字对齐。当前Logo尺寸很小才接近正确位置，调整尺寸后就会从导航栏下方偏移。之前给Logo设置了position:absolute解决了Logo影响导航栏大小的问题，还将Logo从id="header"的标签中移出并用div包裹，不确定这是否引发了额外问题。

现有代码 #

HTML代码

<body>
    <div class="logo">
        <a href="#"><img src="./imgs/logo.png" alt=""></a>
    </div>
    <section id="header">
        <div>
            <ul id="navbar">
                <li><a class="active" href="index.html">Home</a></li>
                <li><a href="shopvhs.html">Shop VHS</a></li>
                <li><a href="shopcassette.html">Shop Cassettes</a></li>
                <li><a href="games.html">Shop Games</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="about.html">About us</a></li>
                <li><a href="cart.html"><i class="fa-solid fa-basket-shopping"></i></a></li>
            </ul>
        </div>
    </section>
</body>

CSS代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h3, h2, p {
    font-size: 16px;
    line-height: 30px;
    color: white;
}

img {
    height: 200px;
}

body {
    width: 100%;
}

/* Header  */
#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 80px;
    box-shadow: 0 20px 15px rgba(0, 0, 0, 0.06);
}

.logo {
    position: absolute;
}

#navbar {
    display: flex;
    align-items: center;
    justify-content: center;
}

#navbar li {
    list-style: none;
    padding: 0 20px;
}

#navbar li a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    color: #71CFE7;
    transition: 0.3s ease;
}

#navbar li a:hover,
#navbar li a.active {
    color: white;
}

解决方案 #

1. 调整HTML结构 #

把Logo的div放回#header内部，利用header的flex布局同时控制Logo和导航栏，避免绝对定位带来的偏移问题：

<body>
    <section id="header">
        <div class="logo">
            <a href="#"><img src="./imgs/logo.png" alt=""></a>
        </div>
        <div>
            <ul id="navbar">
                <li><a class="active" href="index.html">Home</a></li>
                <li><a href="shopvhs.html">Shop VHS</a></li>
                <li><a href="shopcassette.html">Shop Cassettes</a></li>
                <li><a href="games.html">Shop Games</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="about.html">About us</a></li>
                <li><a href="cart.html"><i class="fa-solid fa-basket-shopping"></i></a></li>
            </ul>
        </div>
    </section>
</body>

2. 修改CSS样式 #

• 移除.logo的position:absolute，让它参与header的flex布局
• 给Logo图片单独设置合适高度，避免全局img样式影响，同时控制Logo大小不撑大导航栏
• 保留header的align-items: center，实现Logo与导航文字的垂直居中对齐

修改后的CSS：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h3, h2, p {
    font-size: 16px;
    line-height: 30px;
    color: white;
}

/* 单独设置Logo图片样式 */
.logo img {
    height: 60px; /* 根据导航栏高度调整合适数值 */
    /* 可选：添加max-height限制避免图片过大 */
    /* max-height: 80px; */
}

body {
    width: 100%;
}

/* Header  */
#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 80px;
    box-shadow: 0 20px 15px rgba(0, 0, 0, 0.06);
}

#navbar {
    display: flex;
    align-items: center;
    justify-content: center;
}

#navbar li {
    list-style: none;
    padding: 0 20px;
}

#navbar li a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    color: #71CFE7;
    transition: 0.3s ease;
}

#navbar li a:hover,
#navbar li a.active {
    color: white;
}

关键说明 #

• Logo放回header后，header的flex布局会将Logo和导航栏作为两个子元素，通过align-items: center自动实现垂直对齐
• 单独设置Logo图片高度，既控制了大小，又不会影响页面其他图片
• 移除绝对定位后，元素正常占据布局空间，不会出现偏移问题

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