如何调整Navbar布局：居中或居右？CSS/HTML问题求助

针对你遇到的两个布局问题，直接调整CSS即可解决，以下是修改后的代码和关键说明：

修改后的CSS代码 #

.primary-header{ /*Main top header with navbar*/
    display: flex;
    /* 可选：给header加内边距，避免内容贴边 */
    padding: 0 20px;
}

.primary-header .wrapper {
    /* 让wrapper成为flex容器，使logo和导航横向排列 */
    display: flex;
    align-items: center; /* 垂直方向居中对齐logo与导航 */
    width: 100%; /* 占满header宽度，方便导航右移 */
}

.primary-header img {  /*Logo properties*/
    width: 184px;
    height: 68px;
}

.topnav {
    /* 用flex布局替代float，实现导航链接横向排列 */
    display: flex;
    align-items: center; /* 垂直居中导航链接 */
    margin-left: auto; /* 将导航推至header右侧 */
}

.topnav a{
    color: black;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
    padding: 14px 16px;
    /* 移除无效属性：flex容器下float不生效，display:flex无需单独设置 */
}

/* 汉堡菜单默认隐藏，移动端可按需显示 */
.topnav .icon {
    display: none;
}

关键修改点说明 #

• 解决Navbar位于Logo下方的问题：给.primary-header .wrapper添加display: flex，让logo和导航容器从块级上下排列改为横向并排；通过margin-left: auto将导航容器推至header右侧，同时align-items: center保证logo和导航垂直居中对齐。
• 解决Navbar内部链接居中问题：移除.topnav a里的float: left和display: flex（flex容器下float属性无效），保留text-align: center即可让每个链接的文字居中；.topnav的display: flex会让链接整齐横向排列，配合align-items: center确保垂直方向对齐。

HTML代码无需修改，保持原结构即可。

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