如何用HTML/CSS实现图片与文本对齐？让咖啡图片贴近文本

问题出在你给图片加了float: right，这个属性会让图片脱离文本流，导致和文本拉开距离。要让图片贴近文本，改成行内对齐的方式即可：

修改后的CSS代码 #

.mbc {
  font-size: 60px;
}
.cup {
  vertical-align: middle; /* 让图片与文本垂直居中对齐 */
  margin-left: 8px; /* 可选：微调间距避免贴得太近 */
}

对应的HTML代码（无需改动结构） #

<div class="page1">
  <div>
    <div>
      <h1 class="mbc">Make better<br>coffee<img src="Coffe.png" alt="Coffe image" width="70px" height="67px" class="cup"></h1>
      <p>why learn how to blog?</p>
    </div>
    <img src="Croods.png" alt="Croods" width="476px" height="323px">
  </div>
</div>

原理说明：去掉float: right后，图片会作为行内元素和文本处于同一流中，vertical-align: middle能让图片和文本的中线对齐，这样就会紧密贴合在一起，达到你想要的效果。

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