前端布局问题：实现aboutMe水平居中及div起始位置对齐

需求说明 #

• 让多个不同宽度的div在左侧垂直对齐
• 将类名为aboutMe的元素水平居中显示在屏幕上
• 让类名为about-my-past的元素的起始位置与aboutMe的起始位置对齐

现有代码 #

JSX代码 #

<div className="about__sec">
  <div className="aboutMe">
    <p>
      👋 Hello, I’m Ajeeth. <br /> Looking for an internship in Front-end or
      web developer
    </p>
    <p>
      Currently working at VVDN Technologies as a component Engineer,
      helping to design the electrical board (PCB).
    </p>
    <p>
      I’m an PCB designer with over 2 years of experience in designing a
      printed circuit board. I'm an innovative and dedicated design
      professional dedicated to satisfying my customer’s design
      requirements. I enjoy the challenge of finding unique ways to fulfill
      my customer’s needs.
    </p>
    <p className="email" >
      Let’s talk me on <span>hello@ajeeth.me</span>{" "}
    </p>
  </div>
  <div className="about-my-past">
    <div className="about-my-past--left">
      <div className="about-my-past--content">
        <p>
          I am a mechanical engineer by profession, but I have always had a
          passion for coding. As such, I have decided to switch my career
          path and become a frontend developer.
        </p>
        <p>
          I have been teaching myself coding and have gained a good amount
          of knowledge in HTML, CSS, JavaScript, Bootstrap and React.
        </p>
      </div>
      <img src={Profile_1} alt="profile" />
    </div>
    <div className="about-my-past--right">
      <img src={Profile} alt="" />
      <div className="about-my-past--content">
        <p>
          I am an avid learner, always looking for ways to expand my
          knowledge and develop new skills.
        </p>
        <p>
          I stay up to date with the latest technologies and trends in
          software development, allowing me to stay ahead of the curve.{" "}
        </p>
        <p>
          I am highly organized, have strong problem solving skills, and am
          able to work independently or as part of a team.{" "}
        </p>
        <p>
          I am excited to take on new challenges and to develop projects
          that I can be proud of. With my passion and drive, I am confident
          that I can make a positive impact in the software industry.
        </p>
        <p>
          In conclusion, I am a highly motivated and creative individual who
          is constantly looking for ways to improve my skills and challenge
          myself. I have the right
        </p>
        <p className="email" >
          Let’s talk me on <span>hello@ajeeth.me</span>
        </p>
      </div>
    </div>
  </div>
</div>

CSS代码 #

.about__sec {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  background: #f6f7f2;
  font-weight: 700;
    margin: 0 auto;
  /* border: 2px solid red; */
}

.aboutMe {
  margin: 0 auto;
  max-width: 685px;
  font-size: 25px;
  padding: 84px 0 52px 0;
}

.aboutMe > p {
  margin-bottom: 40px;
}

.aboutMe p:nth-of-type(3) {
  color: #4f5358;
  font-size: 0.72em;
  letter-spacing: 0.15em;
}

.email {
  font-size: 0.64em;
}

span {
  text-decoration: underline;
}

@media (max-width: 685px) {
  .aboutMe {
    max-width: 100%;
    font-size: 16px;
  }
}

.about-my-past {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  margin: 0;
  max-width: 860px;
  font-size: 18px;
}

.about-my-past--left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 417px;
  letter-spacing: 0.02em;
  margin-top: 50px;
}

.about-my-past--content p {
  margin-bottom: 40px;
}

.about-my-past--left img {
  max-width: 417px;
  max-height: 758px;
  border-radius: 20px;
  margin-top: 30px;
}

.about-my-past--right img {
  max-width: 417px;
  max-height: 585px;
  border-radius: 20px;
  margin-bottom: 50px;
}

解决方案 #

修改后的CSS代码 #

.about__sec {
  display: flex;
  flex-direction: column;
  align-items: center; /* 让子元素整体水平居中 */
  background: #f6f7f2;
  font-weight: 700;
  margin: 0 auto;
  width: 100%;
}

.aboutMe {
  max-width: 685px;
  width: 100%; /* 确保元素占满可用宽度，内部内容左对齐 */
  font-size: 25px;
  padding: 84px 0 52px 0;
  margin: 0 auto; /* 保持水平居中 */
}

/* 确保aboutMe内部段落左对齐 */
.aboutMe > p {
  margin-bottom: 40px;
  text-align: left;
}

.about-my-past {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  max-width: 685px; /* 和aboutMe的最大宽度一致，实现起始位置对齐 */
  width: 100%; /* 占满可用宽度，内部元素左对齐 */
  font-size: 18px;
  margin: 0 auto; /* 水平居中，与aboutMe保持对齐 */
}

.about-my-past--left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 417px;
  letter-spacing: 0.02em;
  margin-top: 50px;
}

/* 保留原有样式 */
.aboutMe p:nth-of-type(3) {
  color: #4f5358;
  font-size: 0.72em;
  letter-spacing: 0.15em;
}

.email {
  font-size: 0.64em;
}

span {
  text-decoration: underline;
}

@media (max-width: 685px) {
  .aboutMe {
    max-width: 90%; /* 移动端留边距，提升体验 */
    font-size: 16px;
  }
  
  .about-my-past {
    max-width: 90%; /* 移动端同步宽度 */
    flex-direction: column; /* 移动端改为垂直布局，适配小屏幕 */
  }
}

.about-my-past--content p {
  margin-bottom: 40px;
}

.about-my-past--left img {
  max-width: 417px;
  max-height: 758px;
  border-radius: 20px;
  margin-top: 30px;
}

.about-my-past--right img {
  max-width: 417px;
  max-height: 585px;
  border-radius: 20px;
  margin-bottom: 50px;
}

方案解析 #

1. 不同宽度div左侧垂直对齐：给aboutMe和about-my-past添加width: 100%，结合内部已有的align-items: flex-start，让不同宽度的子元素自动左对齐；父容器about__sec设置align-items: center保证整体居中。
2. aboutMe水平居中：保留margin: 0 auto，搭配max-width: 685px和width: 100%，确保在各种屏幕下都能水平居中，同时内部内容左对齐。
3. about-my-past与aboutMe起始位置对齐：将about-my-past的max-width改为和aboutMe一致的685px，并添加margin: 0 auto，使两个元素处于同一水平居中容器内，起始位置完全匹配；移动端同步调整宽度并改为垂直布局，优化响应式表现。

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