如何修复CSS/HTML导航栏链接与左侧Logo居中对齐问题

顶部导航栏链接与左侧Logo存在垂直偏移、未居中对齐问题，附问题截图、对应CSS及HTML代码片段。此前尝试使用inline-block、float属性调整布局效果异常，要求不使用x/y轴硬编码偏移的定位方式，输出结构清晰、符合前端开发最佳实践的实现方案。

• 布局方案混用：Logo设置float: left脱离普通文档流，父容器设置text-align: center控制链接位置，两类元素不在同一布局流内，没有统一的垂直对齐基准。
• 尺寸规则不统一：导航链接设置上下30px内边距，父导航容器设置上下14px内边距，不同元素的占据高度、文本基线不匹配，直接导致错位。
• 代码存在语法错误：body选择器末尾多写了一个闭合大括号，会导致后续样式解析异常；Logo内多个span重复使用相同id，不符合HTML规范；头部引入的谷歌字体链接为空值，属于无效请求。

抛弃易出现布局异常的float方案，使用Flexbox实现导航布局，无硬编码偏移，结构清晰易维护：

修正后CSS代码 #

/* Logo自定义字体 */
@font-face {
    font-family: 'leander';
    src: url(/Fonts/LEANDER.TTF);
}

/* 顶部导航容器 */
.topnav {
    margin: 0;
    display: flex;
    align-items: center;
    background-color: #141414;
    padding: 0 20px;
    min-height: 60px;
    box-shadow: 0px 5px 10px black;
}

/* 导航链接组容器 */
.nav-links {
    display: flex;
    gap: 8px;
    margin: 0 auto;
}

/* 导航链接默认样式 */
.topnav a {
    color: white;
    text-decoration: none;
    font-size: 17px;
    padding: 21px 16px;
}

/* 当前激活页导航链接样式 */
.topnav a.active {
    background-color: #333;
}

/* Logo样式 */
.logo {
    color: white;
    font-family: 'leander', sans-serif;
    font-size: 20px;
}

/* 全局body样式 */
body {
    margin: 0;
    background-color: #262626;
}

修正后HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arclight Web Development</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="topnav">
    <div class="logo">
        <span>A</span>
        <span>R</span>
        <span>C</span>
        <span>L</span>
        <span>I</span>
        <span>G</span>
        <span>H</span>
        <span>T</span>
    </div>
    <div class="nav-links">
        <a class="active" href="#home">Home</a>
        <a href="#projects">Projects</a>
        <a href="#about">Meet the Dev</a>
        <a href="#contact">Contact</a>
    </div>
</div>

<script src="app.js"></script>
</body>
</html>

方案说明 #

• 核心对齐逻辑：给导航容器设置display: flex+align-items: center，所有子元素自动沿垂直方向居中对齐，从根源解决错位问题，不需要任何transform、top/left类硬编码偏移。
• 布局逻辑：Logo固定在导航栏左侧，给链接组容器设置margin: 0 auto实现链接组在导航栏剩余空间内居中，符合常规导航的交互预期。
• 统一尺寸规则：给导航容器设置固定最小高度，匹配导航链接的上下内边距，保证所有元素可点击区域、文本基线完全对齐，同时修复了原代码的CSS语法错误、重复id、空字体链接等冗余问题。
• 可维护性强：布局天然支持响应式适配，后续做移动端折叠导航只需要补充媒体查询调整flex排列方向即可，维护成本远低于float、inline-block混合布局。

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