如何实现Header中Logo居左、导航链接水平居中？

问题背景 #

当前Header容器使用Bootstrap的justify-content-between类，导致导航链接始终靠右。尝试text-align: center、justify-content: center等CSS属性后仍未解决，需实现：

• Logo保持在Header左侧
• 导航链接（Features、About、Contact）在Header水平居中

现有代码 #

HTML代码 #

<header class="header">
    <div class="container d-flex justify-content-between align-items-center">
        <div class="logo">
            <img src="{{ asset('images/logoheader.png') }}" alt="DishDash Logo" class="logo-img" />
        </div>
        <!-- <h1 class="text-white">DishDash Dashboard</h1> -->
        <div class="d-flex align-items-center">
            <nav>
                <ul class="nav">
                    <li class="nav-item"><a class="nav-link text-white" href="{{ url('/features') }}">Features</a></li>
                    <li class="nav-item"><a class="nav-link text-white" href="{{ url('/about') }}">About</a></li>
                    <li class="nav-item"><a class="nav-link text-white" href="{{ url('/contact') }}">Contact</a></li>
                </ul>
            </nav>
            <div class="ms-3">
                <a href="{{ route('login') }}" class="btn btn-light btn-sm me-2">Login</a>
                <a href="{{ route('register') }}" class="btn btn-primary btn-sm">Register</a>
            </div>
        </div>
    </div>
</header>

CSS代码 #

body, html {
    margin: 0;
    padding: 0;
    font-family: Montserrat, sans-serif;
    height: 100%; /* Ensures full height of the page */
}

/* Background and General Layout */
body {
    background-color: #ffffff;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures footer is pushed to the bottom */
    align-items: center;
    padding: 20px;
    height: 100%;
}

/* Header Styling */
.header {
    background-color: rgb(146, 180, 210);
    padding: 1rem 0;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
    /* display: flex;
    justify-content: center; */
}

.nav li{
    font-weight: bold;
}

解决方案 #

核心思路是调整Header内部的flex布局结构，让导航区域占据Logo和登录按钮之间的全部空间并居中：

修改后的HTML代码 #

<header class="header">
    <div class="container d-flex align-items-center">
        <!-- Logo 保持居左 -->
        <div class="logo">
            <img src="{{ asset('images/logoheader.png') }}" alt="DishDash Logo" class="logo-img" />
        </div>
        <!-- 导航区域：占据剩余空间并居中 -->
        <nav class="flex-grow-1 d-flex justify-content-center">
            <ul class="nav">
                <li class="nav-item"><a class="nav-link text-white" href="{{ url('/features') }}">Features</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="{{ url('/about') }}">About</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="{{ url('/contact') }}">Contact</a></li>
            </ul>
        </nav>
        <!-- 登录注册按钮保持居右 -->
        <div class="ms-3">
            <a href="{{ route('login') }}" class="btn btn-light btn-sm me-2">Login</a>
            <a href="{{ route('register') }}" class="btn btn-primary btn-sm">Register</a>
        </div>
    </div>
</header>

关键调整说明 #

1. 移除容器上的justify-content-between类，避免强制左右分布
2. 给<nav>添加flex-grow-1，让它占据Logo和登录按钮之间的所有可用空间
3. 给<nav>添加d-flex justify-content-center，让内部的导航列表水平居中

简化后的CSS（可保留原有样式，仅需移除无关属性） #

.header {
    background-color: rgb(146, 180, 210);
    padding: 1rem 0;
    width: 100%;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
}

.nav li{
    font-weight: bold;
}

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