如何使用HTML&CSS实现logo下方居中导航栏并适配平板移动端

问题原因 #

原有header采用水平弹性布局，logo和导航默认横向左右分布，同时固定高度限制了垂直排版空间，导航的外边距、内边距设置逻辑混乱，导致无法居中。另外原有代码还存在HTML多余闭合标签、媒体查询未正确闭合的语法问题。

修复方案 #

第一步：修正HTML语法错误 #

删除nav ul末尾多余的</li>标签：

<header>
  <h1 class="logo">👨‍💻 Ett Namn</h1>
  <!-- 导航栏 -->
  <nav>
    <ul>
      <li><a href="index.html">🏠 Hem</a></li>
      <li><a href="portfolio.html">📁 Portfolio</a></li>
      <li><a href="rapport.html">📋 Rapport</a></li>
    </ul>
  </nav>
</header>

第二步：修改核心CSS样式 #

替换原有header、logo、nav相关样式：

/***************站点头部***************/
header {
  display: flex;
  /* 改为垂直排版，让logo在上导航在下 */
  flex-direction: column;
  /* 取消固定高度，自适应内容高度 */
  height: auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0;
}

.logo {
  /* 取消左侧边距，只保留上下间距 */
  margin: 0.8rem 0 0.5rem;
  font-weight: 500;
  text-transform: uppercase;
  color: white;
}

nav {
  /* 取消右侧边距 */
  margin: 0 0 0.8rem;
}

/* 清除ul默认内边距 */
nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

header li {
  font-weight: 300;
  display: inline;
}

第三步：修正响应式样式 #

删除768px断点下logo和nav的错误边距设置，只保留需要的适配逻辑即可：

/***************平板端***************/
@media only screen and (max-width: 768px) {
  /* 删掉原来的.logo、nav、header li里的padding-left、padding-right等错误设置 */
  header li {
    /* 小屏幕下缩小导航项间距 */
    padding: 0 0.8rem;
  }
  /* 其他原有逻辑保留 */
  img {
    width: 40%;
    height: 5%;
  }
  .rows {
    display: inline-block;
  }
  .col {
    margin-bottom: 20%;
  }
  #leftpic {
    margin: auto;
    margin-top: -15%;
  }
  #rightpic {
    margin: auto;
    margin-top: -15%;
  }
  footer {
    margin-left: 20%;
  }
  .intro {
    padding-top: 10%;
    font-size: 70%;
    text-align: center;
  }
}

额外修复 #

原有所有媒体查询都缺少闭合的}，请给每个@media代码块末尾补上闭合大括号，避免样式失效。

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