如何以图片为水平参考点居中网页元素并实现右侧文本对齐？

要实现以图片为水平基准居中所有元素，同时让右侧文本对齐整齐，可通过以下调整优化你的代码：

核心修改点 #

• 移除.item的固定宽度限制，让容器自适应内容，避免不必要的宽度约束
• 调整.item的布局逻辑，确保所有项目的图片处于同一垂直对齐线
• 优化flex布局的对齐方式，让整体容器居中，同时文本区域左对齐保持整齐

修改后的完整代码 #

CSS

.container {
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  max-width: 600px; /* 可选：限制容器最大宽度，避免大屏上过度拉伸 */
  margin: 0 auto; /* 让容器本身在页面中居中 */
}

.title {
  margin-bottom: 20px;
}

.item {
  display: flex;
  justify-content: center; /* 让item-content在水平方向居中 */
  margin-bottom: 10px;
}

.item-content {
  display: flex;
  align-items: flex-start; /* 图片和文本顶部对齐，视觉更统一 */
  width: 100%;
  max-width: 300px; /* 可选：限制每个项目的最大宽度 */
}

.item-image {
  height: 50px;
  width: 50px;
  flex-shrink: 0; /* 固定图片尺寸，避免被压缩 */
  margin-right: 10px;
}

.item-text {
  text-align: left;
  margin: 0;
  flex-grow: 1; /* 让文本区域占据剩余空间 */
}

HTML

<div class="container">
  <h2 class="title"><b>Div Title</b></h2>

  <div class="item">
    <div class="item-content">
      <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="medal" class="item-image">
      <div class="item-text">
        <p>Title 1</p>
        <p><b>Subtitle 1</b></p>
      </div>
    </div>
  </div>

  <div class="item">
    <div class="item-content">
      <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="medal" class="item-image">
      <div class="item-text">
        <p>Title 2</p>
        <p><b>Subtitle 2</b></p>
      </div>
    </div>
  </div>
</div>

效果说明 #

• 整个.container在页面水平居中，内部所有项目以图片为基准对齐
• 所有图片固定尺寸且处于同一垂直对齐线，右侧文本左对齐，排版整齐
• 布局自适应不同屏幕尺寸，同时可通过max-width控制容器和项目的最大宽度，保证视觉美观

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