如何将文本与图片顶部对齐？h3及段落对齐问题求助

嘿，我来帮你搞定这个对齐小问题！你现在的情况是图片和h3+段落已经并排，但文本默认是基线对齐，所以会比图片顶端低一点，咱们直接调整对齐规则就行，给你两个实用方案：

方案1：用Flexbox布局（推荐，灵活省心） #

这是现在处理对齐最顺手的方式，只需要给图片和文本的父容器加个flex属性，再设置顶部对齐就OK：

/* 假设图片和文本都放在class为"side-by-side"的父容器里 */
.side-by-side {
  display: flex;
  align-items: flex-start; /* 核心：让所有子元素顶部对齐 */
  gap: 15px; /* 可选：给图片和文本之间加个间距，看着更舒服 */
}

/* 记得去掉h3和段落默认的上边距，不然还是会有间隙 */
h3 {
  font-family: /* 你的原有字体设置 */;
  margin-top: 0;
}

p {
  margin-top: 0;
}

方案2：用vertical-align属性（适合传统inline-block布局） #

如果你的并排是靠inline-block实现的，直接给图片和文本容器设置顶部对齐：

img {
  vertical-align: top; /* 图片顶对齐 */
}

.text-block {
  display: inline-block;
  vertical-align: top; /* 文本容器顶对齐 */
  width: calc(100% - 215px); /* 比如图片宽200px，加15px间距，就这么写 */
}

h3 {
  margin-top: 0; /* 必须移除默认上边距！ */
}

小提醒 #

• 浏览器给h3和p都自带了上边距，一定要把margin-top设为0，不然就算对齐了，文本还是会往下挪一点；
• Flexbox在现代浏览器都能用，要是需要兼容老IE，就选方案2；
• 测试的时候记得看不同屏幕尺寸下的效果，避免布局错乱~

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