前端开发：实现Header内Logo居左、导航栏居中的布局方案

问题诊断 #

你当前的布局问题核心在于：

1. .header未设置横向布局规则，导致logo和导航默认按块级元素上下堆叠；
2. .navbar错误设置了width:100%，让导航栏占满整行，进一步挤压logo的横向空间。

解决方案（附完整代码） #

HTML（无需修改，保持原有结构即可）

<!--THIS IS MY HEADER-->
<div>
    <header class="header">
        <img class="logo" src="./Pictures/Screenshot 2023-12-22 at 19.40.06.png" alt="My Image">
        <nav class="navbar">
            <ul>
                <li>ABOUT ME</li>
                <li>MY WORK</li>
                <li>CONTACT</li>
            </ul>
        </nav>
    </header>
</div>

修改后的CSS

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

.header {
    background-color: white;
    border-bottom: solid;
    display: flex; /* 启用Flex布局，让子元素横向排列 */
    align-items: center; /* 垂直方向居中对齐logo和导航 */
    padding: 0 20px; /* 左右内边距，避免内容贴边 */
    height: 90px; /* 和logo高度匹配，保持header高度稳定 */
}

.logo {
    width: 188px;
    height: 90px;
}

.navbar ul {
    list-style-type: none; /* 移除列表圆点 */
    display: flex; /* 导航项横向排列 */
    gap: 40px; /* 控制导航项之间的间距 */
}

/* 移除.navbar的width:100%，避免占满整行导致换行 */
.navbar{
    margin: 0 auto; /* 让导航栏在剩余空间中水平居中 */
}

原理拆解 #

1. Flex布局启用：给.header设置display:flex后，它的直接子元素（logo和nav）会从默认的块级堆叠，改为水平方向排列，这是实现横向布局的核心。
2. 垂直居中对齐：align-items:center让logo和导航文字在垂直方向上居中对齐，避免因元素高度不同出现上下错位。
3. 导航栏居中技巧：给.navbar设置margin:0 auto，在Flex容器中，auto margin会自动占据左右两侧的剩余空间，从而让导航栏在header的水平区域内居中，而logo因无额外margin会自然靠左。
4. 导航项排版优化：给ul设置display:flex+gap，替代原有的justify-content:space-evenly，可以更直观地控制导航项之间的间距，避免导航项数量变化时布局混乱。
5. 布局稳定性控制：给.header设置固定高度和左右内边距，既保证header高度与logo一致，又避免内容紧贴页面边缘，提升视觉舒适度。

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