求助：水平固定顶部导航栏布局及副标题排版问题

看来你是想做一个顶部固定的导航栏，中间的名称和副标题垂直排列但布局出问题了对吧？这大概率是因为中间的文本容器没有设置正确的垂直排列规则，导致和左右的链接元素布局冲突。我给你一套完整的实现方案，能完美解决这个问题：

第一步：HTML结构 #

先把导航栏的结构拆分成三个清晰的部分：左侧链接组、中间的首页链接（包含全名和副标题）、右侧链接组：

<nav class="top-nav">
  <!-- 左侧导航链接 -->
  <div class="nav-links left-links">
    <a href="#portfolio">Portfolio</a>
    <a href="#about">About</a>
    <a href="#services">Services</a>
  </div>

  <!-- 中间的首页链接（垂直文本） -->
  <a href="/" class="logo-link">
    <span class="full-name">Your Full Name</span>
    <span class="subtitle">photography</span>
  </a>

  <!-- 右侧导航链接 -->
  <div class="nav-links right-links">
    <a href="#blog">Blog</a>
    <a href="#testimonials">Testimonials</a>
    <a href="#contact">Contact</a>
  </div>
</nav>

第二步：CSS样式（核心解决布局问题） #

用Flex布局实现水平分布，同时给中间的logo链接设置垂直排列规则，确保文本不会乱跑：

/* 全局重置（避免默认样式干扰） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

/* 顶部固定导航栏 */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff; /* 可自定义背景色 */
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 可选，增加阴影提升质感 */
  z-index: 1000; /* 确保导航栏在最上层不被覆盖 */
}

/* 左右链接组的通用样式 */
.nav-links {
  display: flex;
  gap: 2rem; /* 控制链接之间的间距 */
}

.nav-links a {
  color: #333; /* 链接默认颜色 */
  font-size: 1rem;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #666; /* hover时的颜色变化 */
}

/* 中间的logo链接（核心：实现垂直文本） */
.logo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333;
}

.full-name {
  font-size: 1.25rem;
  font-weight: bold;
}

.subtitle {
  font-size: 0.875rem;
  color: #666; /* 副标题用浅一点的颜色区分 */
  margin-top: 0.25rem;
}

关键说明 #

1. 导航栏的Flex布局：justify-content: space-between 让左侧链接靠左、右侧链接靠右，中间的logo自动居中，完美实现你要的三分布局。
2. 中间文本的垂直排列：给.logo-link设置flex-direction: column，里面的全名和副标题就会垂直堆叠，同时align-items: center保证文本居中对齐，不会出现偏移。
3. 固定顶部处理：position: fixed + width: 100% 确保导航栏始终固定在页面顶部，z-index: 1000 防止被页面其他内容覆盖。

你可以直接把这套代码拿去用，替换掉里面的链接文本和名称，就能得到你想要的布局啦！

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