html - 仅在移动设备中使用 bootstrap 在 div 中居中图像

Question

我有这个:

https://jsfiddle.net/pmiranda/g4ypamvo/

<div class="container">
  <div class="row">
      <div class="col-md-12">
          <div class="col-md-1"></div>
          <div class="col-md-2"><img src="http://placehold.it/200x100" alt="" alt="Image" style="max-width:100%;padding: 54px 0;"></div>
          <div class="col-md-2"><img src="http://placehold.it/200x100" alt="" alt="Image" style="max-width:100%;padding: 54px 0;"></div>
          <div class="col-md-2"><img src="http://placehold.it/200x100" alt="" alt="Image" style="max-width:100%;padding: 54px 0;"></div>
          <div class="col-md-2"><img src="http://placehold.it/200x100" alt="" alt="Image" style="max-width:100%;padding: 54px 0;"></div>
          <div class="col-md-2"><img src="http://placehold.it/200x100" alt="" alt="Image" style="max-width:100%;padding: 54px 0;"></div>
          <div class="col-md-1"></div>
      </div>
  </div>
</div>

在桌面上查看时没有问题，就像我想要的那样。但在移动端，每张图片都是左对齐的。检查 jsfiddle 并减小输出宽度。我已经在每个 div 中尝试过 margin: 0 auto 或使用 center 类的 Bootstrap ，但我无法获得它，我需要查看以手机分辨率为中心的图像。我该怎么做？

Answer 1

您可以使用 Bootstrap text-center 类:

<div class="col-md-2 text-center">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
      <div class="col-md-12">
          <div class="col-md-1"></div>
          <div class="col-md-2 text-center"><img src="http://placehold.it/200x100" alt="" alt="Image" style="max-width:100%;padding: 54px 0;"></div>
          <div class="col-md-2 text-center"><img src="http://placehold.it/200x100" alt="" alt="Image" style="max-width:100%;padding: 54px 0;"></div>
          <div class="col-md-2 text-center"><img src="http://placehold.it/200x100" alt="" alt="Image" style="max-width:100%;padding: 54px 0;"></div>
           <div class="col-md-2 text-center"><img src="http://placehold.it/200x100" alt="" alt="Image" style="max-width:100%;padding: 54px 0;"></div>
           <div class="col-md-2 text-center"><img src="http://placehold.it/200x100" alt="" alt="Image" style="max-width:100%;padding: 54px 0;"></div>
          <div class="col-md-1"></div>
      </div>
  </div>
</div>