Navbar居中、页面文本对齐及图片行布局问题求助

问题1：Navbar无法居中且消失 #

原因 #

• HTML结构错误：<a class="navbar-brand" href="#">未闭合，导致内部折叠面板被嵌套在链接标签内，破坏布局逻辑
• CSS冲突：重复设置position: absolute，且top: -50%将Navbar移出可视区域
• 自定义样式覆盖Bootstrap默认Navbar规则，导致布局混乱

修复步骤 #

1. 修正HTML结构，闭合navbar-brand标签
2. 移除CSS中冲突的定位设置，保留sticky-top实现顶部固定
3. 使用Bootstrap内置的justify-content-center类实现Navbar内容水平居中

问题2：主页姓名文本未水平垂直居中 #

原因 #

• main-display的top: 290%是错误定位值，无法实现居中
• 父容器未设置居中布局的上下文

修复步骤 #

1. 给#mainPage添加Flex布局属性，直接居中内部内容
2. 移除main-display中错误的定位样式，利用父容器的Flex规则完成居中

问题3：三张图片无法正确排成一行 #

原因 #

• 自定义的transform、margin设置打乱了Flex布局逻辑
• gap: -190rem是无效负间距，导致元素重叠
• figure设置height: 100vh占用过多高度，破坏横向排列

修复步骤 #

1. 移除所有针对单个图片的偏移、边距设置
2. 调整about-me-pics的Flex属性，设置合理间距和自适应宽度
3. 限制图片最大宽度，确保在不同屏幕下保持比例排列

修改后的完整代码 #

HTML代码 #

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

<head>
  <meta charset="UTF-8">
  <title>Personal Project</title>

  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <link rel="stylesheet" href="assets/css/aos.css">

  <!-- 自定义样式 -->
  <link rel="stylesheet" href="style.css">

</head>

<body>

  <nav class="navbar sticky-top navbar-expand-lg">
    <div class="container">
      <a class="navbar-brand" href="#"></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>
      <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
        <ul class="navbar-nav mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Projects</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <section id="mainPage">
    <div class="container h-100">
      <div class="row h-100 align-items-center justify-content-center">
        <div class="col-lg-12">
          <div class="main-display">
            <h1 id="name-title">Mazin Esmail</h1>
            <h2>Software Developer</h2>
            <h2>Student</h2>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="about-me">
    <div class="container">
      <div class="row">
        <div class="heading-about col-12">
          <h1 id="about--me" class="display-5">About me</h1>
          <p id="border-line-about"></p>
        </div>
      </div>
    </div>
    <div class="about-page-text container">
      <p>Hello!, I am a student at Cal State San Bernardino and I am studying the field of computer science. I love going out to view new things and play the sports that I love. As an aspiring software engineer I want to solve real life problems and create web applications to further thrive a positive impact to the world.</p>
    </div>

    <div class="about-me-pics container">
      <figure class="about-pic-item">
        <img src="assets/img/IMG_0525.jpeg" alt="Las Vegas, Nevada" />
        <figcaption>Las Vegas, Nevada</figcaption>
      </figure>

      <figure class="about-pic-item">
        <img src="assets/img/IMG_0816.jpeg" alt="Fontana, California" />
        <figcaption>Fontana, California</figcaption>
      </figure>

      <figure class="about-pic-item">
        <img src="assets/img/IMG_2825.jpeg" alt="Fontana, California" />
        <figcaption>Fontana, California</figcaption>
      </figure>
    </div>
  </section>

  <!-- Bootstrap and AOS JS -->
  <script src="assets/js/bootstrap.bundle.min.js"></script>
  <script src="https://kit.fontawesome.com/8c2adfc9c1.js" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
</body>

</html>

CSS代码 #

@font-face {
  font-family: Oswald;
  src: url("../fonts/Oswald-Medium.ttf");
}

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Oswald, serif;
}

/* Navbar样式修复 */
.navbar {
  height: 80px;
  background-color: rgba(0, 0, 0, 0.8);
}

.nav-link {
  color: white !important;
  font-size: 1.2rem;
}

/* 主页居中样式 */
#mainPage {
  background-image: url(https://www.pixelstalk.net/wp-content/uploads/images1/Shadows-Backgrounds-HD.jpg);
  min-height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: center;
  color: aliceblue;
  display: flex;
  align-items: center;
}

.main-display {
  text-align: center;
}

/* About Me区域样式 */
#about-me {
  background-color: lightblue;
  min-height: 100vh;
  padding: 2rem 0;
}

.about-page-text {
  margin: 2rem 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* 图片排列修复 */
.about-me-pics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 2rem 0;
}

.about-pic-item {
  flex: 1 1 300px;
  max-width: 400px;
}

.about-pic-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.about-pic-item figcaption {
  margin-top: 0.5rem;
  font-size: 1rem;
}

/* 移除无用样式 */
#border-line-about {
  display: none;
}

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