嘿，我来帮你搞定这个布局问题！你遇到的核心问题是：h1标签默认是块级元素，会独占一整行，所以图片会被挤到标题上方。下面给你两种简单有效的解决方法：

方法1：用Flexbox布局（推荐，现代且灵活） #

直接给包含图片和标题的父容器添加Flex属性，既能让它们同行，还能轻松实现垂直居中：

修改后的HTML片段 #

<div class="row">
  <div class="col-sm-4">
    <div class="row">
      <!-- 给这个父div添加flex相关的样式 -->
      <div class="col-12" style="display: flex; align-items: center; gap: 12px;">
        <img class="img-circle" src="download.jpg">
        <h1> A heading </h1>
      </div>
    </div>
    <hr>
    <br>
    <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
  </div>
</div>

• display: flex：让容器内的元素变成弹性布局，自动同行排列
• align-items: center：让图片和标题垂直居中对齐，视觉更协调
• gap: 12px：给图片和标题之间添加间距，避免挤在一起

如果你用的是Bootstrap框架，还可以直接用内置的类替代行内样式：

<div class="col-12 d-flex align-items-center gap-3">

方法2：修改元素的Display属性 #

通过把h1改成inline-block，让它不再独占一行，和图片（默认是inline-block）并排显示：

添加自定义CSS #

.img-circle {
  margin-right: 12px; /* 调整图片和标题的间距 */
}

h1 {
  display: inline-block;
  vertical-align: middle; /* 保证和图片垂直对齐 */
  margin: 0; /* 去掉h1默认的上下外边距，避免多余间距 */
}

这样修改后，图片就能乖乖待在h1标题的左侧，和标题处于同一行啦！

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