导航栏元素对齐问题：Logo文本与其他导航项未垂直居中对齐

你的导航栏中，带Font Awesome图标的大字号Logo文本无法和其他导航项对齐，核心原因是flex容器未设置垂直对齐，且Logo元素的排版属性未适配大尺寸内容，以下是具体修复方案：

核心修改点 #

• 给flex容器添加垂直对齐属性，统一所有导航项的垂直位置
• 调整Logo元素的排版逻辑，让图标和文本自身垂直居中
• 修正Font Awesome的无效尺寸类，确保图标显示正常
• 优化Logo hover下划线的定位，适配大字号文本

修改后的完整代码 #

CSS部分 #

* {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px
}

body {
  background-color: RGB(40, 43, 48);
  margin: 0;
  padding: 0;
}

nav {
  background-color: RGB(30, 33, 36);
}

.main-nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center; /* 新增：让所有导航项垂直居中 */
}

.main-nav li {
  padding: 10px;
}

.main-nav li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.push {
  margin-left: auto;
}

.nav-logo {
  font-size: 20px;
  display: inline-flex; /* 改用flex布局，让图标和文本对齐 */
  align-items: center; /* 图标与文本垂直居中 */
  gap: 4px; /* 图标和文本间留间距 */
  position: relative;
  color: white;
}

.nav-logo:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 2px; /* 改用bottom定位，适配不同字号 */
  left: 0;
  background-color: white;
  transform-origin: center;
  transition: transform 0.25s ease-out;
}

.nav-logo:hover:after {
  transform: scaleX(1);
  transform-origin: center;
}

.nav-contents {} /* 统一类名拼写 */

HTML部分 #

<script src="https://kit.fontawesome.com/df395811d0.js" crossorigin="anonymous"></script>
<nav>
  <ul class="main-nav">
    <li>
      <a href="#home" class="nav-logo"> 
        <i class="fa-solid fa-greater-than" style="font-size: 18px;"></i> <!-- 用内联样式设置图标尺寸，替代无效的fa-18px类 -->
        Terminalize 
      </a>
    </li>
    <li> <a href="#html" class="nav-contents"> HTML </a> </li>
    <li> <a href="#CSS" class="nav-contents"> CSS </a> </li>
    <li> <a href="#JavaScript" class="nav-contents"> JavaScript </a> </li> <!-- 补全href的#符号 -->
    <li> <a href="#python" class="nav-contents"> Python </a> </li>
    <li> <a href="#windows" class="nav-contents"> Windows </a> </li>
    <li> <a href="#linux" class="nav-contents"> Linux </a> </li>
    <li> <a href="#macos" class="nav-contents"> MacOS </a> </li>
    <li class="push"> <a href="#about" class="nav-contents"> About </a> </li> <!-- 统一类名，去掉无效的nav-content -->
  </ul>
</nav>

修复说明 #

1. .main-nav添加align-items: center后，所有导航项会在垂直方向统一居中，解决整体错位问题
2. .nav-logo改用inline-flex布局，确保Font Awesome图标和Logo文本自身垂直对齐
3. 替换无效的fa-18px类为内联样式，避免图标尺寸异常影响对齐
4. 下划线改用bottom定位，相对于元素底部计算位置，比固定top值更适配不同字号
5. 修正HTML中的小错误：补全href的#符号、统一导航项类名

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