Bootstrap行内图片布局问题求助：底部冗余内边距与垂直对齐异常

嗨，我来帮你搞定这两个困扰你多日的Bootstrap布局问题～这俩都是前端布局里很常见的小坑，咱们一步步来解决：

问题1：图片下方出现无法消除的异常内边距 #

这个问题的根源是图片默认属于inline元素，浏览器会为它预留出和文字基线对齐的间隙，看起来就像下方有多余的padding/margin。结合你的代码，我们可以这样处理：

解决方案： #

• 针对右侧带img-responsive类的图片：虽然Bootstrap的img-responsive已经设置了display: block，但如果父容器有额外行高影响，给父容器.image-container添加样式消除间隙：

.image-container {
  line-height: 0; /* 消除行高带来的隐性间隙 */
}

• 针对下载按钮里的图片（<a>标签内的图片）：给图片添加display: block，直接打破inline元素的基线规则：

.download img {
  display: block;
}

问题2：图片居左、文本右侧时垂直对齐错位 #

当图片和文本在同一行布局时，默认是基线对齐，这会导致文本比图片偏下，出现垂直错位。我们有两种常用的解决思路：

解决方案： #

1. 用Bootstrap自带的Flex布局类（推荐）：把包含图片和文本的容器设置为flex容器，再用align-items-center实现垂直居中。比如如果你的文本和图片在同一容器内，代码可以改成：

<div class="d-flex align-items-center">
  <img src="你的图片路径" class="mr-3" alt=""> <!-- mr-3是Bootstrap的右间距类，避免图片和文本紧贴 -->
  <p>你的文本内容</p>
</div>

2. 用CSS垂直对齐属性：给图片和对应的文本元素都设置vertical-align: middle，强制它们以中线对齐：

/* 假设图片类为.img-left，文本容器类为.text-right */
.img-left, .text-right {
  vertical-align: middle;
}

针对你提供的代码，如果是想让左侧文本区块和右侧图片区块整体垂直对齐，那你可以把原来的<div class="row row-eq-height">换成<div class="row align-items-center">——Bootstrap的Flex行类align-items-center可以直接让一行内的所有列垂直居中，比自定义row-eq-height更可靠。

调整后的完整代码示例 #

<div class="firstline">
  <div class="container">
    <div class="row align-items-center"> <!-- 替换row-eq-height为align-items-center实现整体垂直居中 -->
      <article class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <h1>TEXT HERE</h1>
        <div class="pcp">
          <p>MORE TEXT HERE </p>
        </div>
        <div class="download">
          <a href="https://play.google.com/store/apps/details?id=com.wop.android">
            <img src="img/googleplay.jpg" style="display: block;"> <!-- 消除图片下方间隙 -->
          </a>
        </div>
      </article>
      <article class="col-lg-6 col-md-6 col-sm-12 col-xs-12 image-container" style="line-height: 0;">
        <img class="img-responsive" height="80%" src="img/pru1/img1.png">
      </article>
    </div>
  </div>
</div>

这样应该就能同时解决你遇到的两个问题啦～如果还有细节需要微调，随时调整样式即可。

内容的提问来源于stack exchange，提问作者Jose Molina Che0