如何实现全设备适配的导航栏链接垂直对齐并修复logo重叠

问题描述 #

无法将导航栏内的链接垂直居中对齐，同时出现Logo重叠页面内容的问题，尝试文本居中操作未解决。

错误点分析 #

1. 导航栏结构违规：Bootstrap导航栏的navbar-collapse模块被放在container-fluid外部，破坏框架内置布局逻辑，导致垂直居中失效。
2. Logo缩放方式错误：使用scale:4缩放Logo，该属性会让元素脱离正常文档流，视觉上超出导航栏范围，挤压其他内容。
3. 固定导航栏未预留空间：导航栏设为position:fixed但页面主内容未设置顶部间距，导致内容被导航栏遮挡。
4. 类名冲突：自定义标题使用text-center类，与Bootstrap内置类名冲突，引发样式异常。

修复后的完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TEXT ABC</title>
  <!-- 引入Google字体 -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Lato:wght@400;700&display=swap"
    rel="stylesheet">
  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <!-- 引入Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <!-- 引入自定义CSS -->
  <link rel="stylesheet" href="../style/main.css">
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#"><img src="../components/images/Sample Logo.png" alt="main logo"></a>
      <!-- 移动端折叠按钮 -->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- 导航菜单移回container-fluid内部 -->
      <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">PRODUCTS</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">ABOUT US</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">CONTACT</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="video-container">
    <video src="../components/videos/mainVideo_First.mp4" autoplay muted loop></video>
    <!-- 重命名类名避免冲突 -->
    <h1 class="video-title">Text</h1>
  </div>
  <!-- 引入Bootstrap JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>

</html>

CSS代码 #

/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', 'Lato', sans-serif;
}

/* 导航栏样式 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: 90px;
    background: rgba(31, 30, 30, 0.718);
    backdrop-filter: blur(10px);
    border-radius: 0;
    transition: all 0.5s ease-in-out;
    /* Flex布局实现垂直居中 */
    display: flex;
    align-items: center;
}

.navbar-brand img {
    /* 移除scale，改用max-height控制尺寸，避免脱离文档流 */
    max-height: 70px;
    margin-left: 10px;
}

/* 移动端适配 */
@media (max-width: 575.98px) {
    .navbar {
        height: auto;
        padding: 10px 0;
    }
    .navbar-nav {
        text-align: center;
    }
    .nav-item {
        margin: 8px 0;
    }
}

/* 视频容器样式 */
.video-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /* 给固定导航栏预留高度，避免内容被遮挡 */
    margin-top: 90px;
}

video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out;
}

/* 自定义标题样式 */
.video-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 2px 2px 10px rgba(22, 212, 53, 0.5);
    transition: opacity 0.5s ease-in-out;
    text-align: center;
}

@media (max-width: 767px) {
    .video-title {
        font-size: 20px;
    }
}

/* 导航链接样式 */
.nav-link {
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    font-size: 16px;
    margin: 0 15px;
}

.nav-link:hover {
    color: #16d435;
    text-decoration: underline;
}

修复说明 #

1. 修正导航栏结构：将navbar-collapse移至container-fluid内部，添加标准折叠按钮，遵循Bootstrap布局规范，恢复框架内置垂直居中能力。
2. 修复Logo缩放问题：移除scale属性，改用max-height控制Logo尺寸，确保元素在文档流内，避免视觉溢出和内容挤压。
3. 实现垂直居中：给.navbar添加display:flex; align-items:center;，利用Flex布局让导航栏内所有元素自动垂直居中。
4. 解决内容遮挡：给video-container设置margin-top:90px，与导航栏高度一致，确保页面主内容不被固定导航栏遮挡。
5. 优化移动端适配：
   • 移动端导航栏改为自适应高度，避免固定高度导致内容溢出
   • 导航链接垂直排列并增加间距，提升移动端可读性
   • 标题字体尺寸随屏幕宽度自适应调整
6. 解决类名冲突：将标题的text-center类改为video-title，避免与Bootstrap内置类名冲突引发的样式异常。

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