如何将h1、p元素置于图片右侧并实现整体页面居中？

我是Web开发新手，正在通过小项目巩固所学知识，但遇到了瓶颈，感到很挫败。我希望将h1（姓名内容）和p（职业描述）元素放置在图片右侧，同时让图片与文字整体在页面居中，对此我十分困惑。我曾在数月前学习过flexbox但已遗忘，求助ChatGPT后反而让问题变得更糟。因害怕他人评判，我未在Stack Overflow提问，若有表述错误请见谅。目前我还不熟悉Bootstrap，因此项目未使用该框架。

我期望的效果是：图片在左侧，姓名和职业描述在图片右侧，且整个图片+文字的组合在页面水平居中。

以下是我的代码：

HTML代码 #

<div class="heading">
  <h1>The World of me: Portfolio</h1>
</div>

<div class="my-info">
  <div>
    <img class="me" src="CSS/images/me.jpg" alt="Nevin">
  </div>
  <div class="personal">
    <h1 class="name">My name is <strong>Nevin Dabechuran</strong></h1>
    <p class="job"><em>A Web designer</em></p>
  </div>
</div>

CSS代码 #

.my-info {
  display: flex;
  align-items: center;
}

.my-info img {
  border-radius: 50%;
  width: 25%;
  height: auto;
  margin-right: 20px;
}

.my-info div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1 {
  color: #f1efe8;
  font-family: 'Droid serif', serif;
  font-size: 36px;
  font-weight: 400;
  font-style: italic;
  line-height: 44px;
  margin: 0 0 12px;
  text-align: center;
}

.heading {
  background-image: url("https://mcdn.wallpapersafari.com/medium/50/40/Tnh47t.jpg");
  background-size: cover;
  width: 100vw;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.name {
  font-size: 36px;
  font-weight: 400;
  color: black;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0;
}

.job {
  font-size: 26px;
  font-weight: 400;
  color: black;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
  margin: 0;
}

只需要对现有代码做几处调整，就能实现你要的效果：

• 给.my-info添加水平居中属性，让整个图片+文字组合居中
• 修正文字容器的对齐方式，让文字左对齐（匹配示例效果）
• 调整图片宽度为固定值，避免百分比导致的尺寸失控

修改后的CSS代码：

.my-info {
  display: flex;
  align-items: center;
  justify-content: center; /* 新增：让内容水平居中 */
  margin-top: 40px; /* 新增：和上方标题区拉开视觉距离 */
}

.my-info img {
  border-radius: 50%;
  width: 150px; /* 调整为固定宽度，更可控 */
  height: auto;
  margin-right: 30px; /* 加大间距，提升视觉舒适度 */
}

/* 移除原来的.my-info div全局flex设置，避免影响图片容器 */

.personal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* 让文字左对齐 */
}

h1 {
  color: #f1efe8;
  font-family: 'Droid serif', serif;
  font-size: 36px;
  font-weight: 400;
  font-style: italic;
  line-height: 44px;
  margin: 0 0 12px;
  text-align: center;
}

.heading {
  background-image: url("https://mcdn.wallpapersafari.com/medium/50/40/Tnh47t.jpg");
  background-size: cover;
  width: 100vw;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.name {
  font-size: 36px;
  font-weight: 400;
  color: black;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0 0 8px 0; /* 增加底部间距，区分姓名和职业 */
}

.job {
  font-size: 26px;
  font-weight: 400;
  color: black;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: left; /* 修改为左对齐 */
  margin: 0;
}

HTML代码无需修改，保持原样即可。调整后图片会固定在左侧，姓名和职业描述左对齐显示在右侧，整个组合在页面水平居中，完全符合你的需求。

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