如何在移动端对齐水平元素？实现图片置于文字上方布局

嘿，你已经用了Bootstrap的栅格系统来做响应式布局，要达成你想要的效果，只需要给每个图标项调整一下内部结构，再加点简单的CSS样式就行，具体操作如下：

第一步：调整HTML结构 #

咱们给每个包含图片和文字的div里，再套一个容器（比如class="icon-item"），这样更方便控制内部元素的排列方式：

<div class="container">
  <div class="row vcenter">
    <div class="col-xs-12 col-sm-6 col-md-2">
      <h3>Why Us?</h3>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-10 items_why">
      <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="icon-item">
          <img src="/assets/img/icons/destination_expert.png">
          <span>Destination Expert</span>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="icon-item">
          <img src="/assets/img/icons/faster.png">
          <span>Faster</span>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="icon-item">
          <img src="/assets/img/icons/transparent.png">
          <span>Transparent</span>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="icon-item">
          <img src="/assets/img/icons/cheaper.png">
          <span>Cheaper</span>
        </div>
      </div>
    </div>
  </div>
</div>

第二步：添加CSS样式 #

利用CSS的Flex布局和媒体查询，实现不同屏幕尺寸下的排列切换：

/* 默认移动端样式：图片在上，文字在下 */
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center; /* 让图片和文字居中对齐，可选 */
  text-align: center; /* 文字居中，可选 */
  margin-bottom: 15px; /* 给每个项加底部间距，可选 */
}

/* 桌面端（md及以上屏幕）：图片在左，文字在右 */
@media (min-width: 768px) {
  .icon-item {
    flex-direction: row;
    gap: 10px; /* 给图片和文字之间加个间距，可调整 */
    align-items: center; /* 垂直居中对齐 */
    text-align: left; /* 文字左对齐，可选 */
    margin-bottom: 0; /* 取消桌面端的底部间距，可选 */
  }
}

效果说明 #

• 在移动端（xs/sm屏幕）：每个icon-item会垂直排列，图片自然在文字上方，和你参考的移动端视图一致。
• 在桌面端（md及以上屏幕）：icon-item切换为横向排列，图片和文字在同一行，符合你提供的桌面视图布局。

如果你的Bootstrap版本有自带的flex工具类，也可以直接用d-flex、flex-column、flex-md-row这些类来替代自定义CSS，比如把icon-item换成d-flex flex-column flex-md-row align-items-center gap-2，这样能减少自定义代码，用框架自带的工具类更简洁哦！

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