导航栏样式、主页内容居中及图片排版的HTML/CSS调整咨询

给导航栏容器用Flex布局实现垂直居中，同时设置与主页一致的背景色：

<nav class="navbar">
  <ul class="nav-links">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">作品</a></li>
  </ul>
</nav>

.navbar {
  background-color: #你的主页背景色值; /* 替换成主页实际背景色 */
  height: 60px; /* 按需设置导航栏高度 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 2rem; /* 控制导航项间距 */
}

.nav-links a {
  text-decoration: none;
  color: #333; /* 按需调整文字颜色 */
}

通过给父容器设置全屏高度+Flex布局，实现内容水平垂直双向居中：

<section class="hero-box">
  <div class="hero-content">
    <h1>你的姓名</h1>
    <p>你的身份信息</p>
  </div>
</section>

.hero-box {
  height: 100vh; /* 占满整个视口高度 */
  margin: 0;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  background-color: #你的主页背景色值;
}

.hero-content {
  text-align: center; /* 内部文本水平对齐，避免视觉偏移 */
}

用Flex布局实现横向规整排列，通过负margin或transform实现上移：

<section class="image-group">
  <div class="image-card">
    <img src="img1.jpg" alt="图片1">
    <p>图片1描述文本</p>
  </div>
  <div class="image-card">
    <img src="img2.jpg" alt="图片2">
    <p>图片2描述文本</p>
  </div>
  <div class="image-card">
    <img src="img3.jpg" alt="图片3">
    <p>图片3描述文本</p>
  </div>
</section>

.image-group {
  display: flex;
  justify-content: center; /* 整体水平居中 */
  gap: 2rem; /* 控制卡片间距 */
  margin-top: -60px; /* 上移调整，按需修改数值 */
  padding: 0 1rem; /* 避免屏幕过小时溢出 */
}

.image-card {
  width: 300px; /* 统一卡片宽度 */
  text-align: center; /* 描述文本居中 */
}

.image-card img {
  width: 100%;
  height: 220px; /* 统一图片高度 */
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}

.image-card p {
  margin-top: 0.8rem;
  font-size: 0.9rem;
}

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