如何用HTML、CSS和Bootstrap实现页面顶部图片与标题并排且无大间距

制作单页作品集时，需要实现以下布局效果：

• 图片与h1标签在页面顶部居中对齐
• 图片向下偏移15px
• h1标题位于图片右侧并与图片中部对齐

目前实现效果接近，但图片与h1文本间存在较大间距，原代码如下：

原HTML代码 #

<!-- Header image and information -->
<div class="container">
    <div class="row">
          <div class="col-md-4 text-center">
                <img id="myPic" src="images/Me.jpg" alt="Me" class="img-fluid">
          </div>
          <div class="col-md-8 text-center">
                 <h1>Somebody Jone| Does some crazy stuff!</h1>
          </div>
    </div>
</div>

原CSS代码 #

h1 {
 color: darkslateblue;
 margin:75px 0 0 0;
 padding: 0;
}
#myPic {
 border: 4px inset darkslategray;
 border-radius: 25px;
 height: auto;
 margin: 25px 0 0 0;
 padding: 0;
 width: 150px;
}

现有输出效果 #

问题根源在于Bootstrap的col-md-4和col-md-8是固定宽度列，会占用多余空间导致间距过大，且手动设置的margin无法精准实现垂直居中。提供两种解决方式：

方案1：使用Flex布局（脱离Bootstrap列限制） #

直接用Flex布局控制元素对齐，更灵活：

修改后HTML代码 #

<!-- Header image and information -->
<div class="container">
    <div class="header-row">
        <img id="myPic" src="images/Me.jpg" alt="Me" class="img-fluid">
        <h1>Somebody Jone| Does some crazy stuff!</h1>
    </div>
</div>

修改后CSS代码 #

/* 容器确保整体顶部居中 */
.container {
    text-align: center;
}

/* Flex容器实现垂直+水平居中，控制元素间距 */
.header-row {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中 */
    gap: 15px; /* 图片与标题的间距，可按需调整 */
}

h1 {
    color: darkslateblue;
    margin: 0; /* 移除手动设置的margin，依赖Flex垂直居中 */
    padding: 0;
}

#myPic {
    border: 4px inset darkslategray;
    border-radius: 25px;
    height: auto;
    margin-top: 15px; /* 图片向下偏移15px */
    padding: 0;
    width: 150px;
}

方案2：保留Bootstrap框架优化布局 #

如果需要保留Bootstrap的响应式特性，调整列类型并利用Bootstrap的Flex工具类：

修改后HTML代码 #

<!-- Header image and information -->
<div class="container">
    <div class="row align-items-center justify-content-center">
        <div class="col-auto"> <!-- 自适应宽度，替代固定宽度列 -->
            <img id="myPic" src="images/Me.jpg" alt="Me" class="img-fluid">
        </div>
        <div class="col-auto"> <!-- 自适应宽度，避免多余空间 -->
            <h1>Somebody Jone| Does some crazy stuff!</h1>
        </div>
    </div>
</div>

修改后CSS代码 #

h1 {
    color: darkslateblue;
    margin: 0; /* 移除手动margin，依赖Bootstrap的align-items:center垂直居中 */
    padding: 0;
}

#myPic {
    border: 4px inset darkslategray;
    border-radius: 25px;
    height: auto;
    margin-top: 15px; /* 图片向下偏移15px */
    padding: 0;
    width: 150px;
}

/* 自定义图片与标题的间距 */
.row {
    gap: 15px;
}

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