html - 如何水平对齐不同 div 中的图像

Question

你能帮我理解如何在同一行的不同 div 之间水平对齐图像，而不考虑 div 的内部内容吗？ 我试过绝对定位，但这次面试测试要求我将所有内容都放在内部 div 容器中。

例子:

<div class="row">
  <div class="col-md-3 product-box">
    <div class="col-md-12 background-contain">
      <p class="blue-title">Product Title 1</p>
      Staring at $500
      <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <br>
      <div class="img-contain">
        <img src="materials/images/cereal_b.jpg" class="img-responsive" alt="cereal" />
      </div>
      <a class="bottom-link">Learn More</a>
    </div>
  </div>
  <div class="col-md-3 product-box">
    <div class="col-md-12 background-contain">
      <p class="blue-title">Product Title 2</p>
      Staring at 1900
      <br> Donec ornare magna sit amet erat molestie sollicitudin ac vitae lectus.</br>
      <img src="materials/images/flower_b.jpg" class="img-responsive" alt="cereal" />
      <a class="bottom-link">Learn More</a>
    </div>
  </div>
  <div class="col-md-3 product-box">
    <div class="col-md-12 background-contain">
      <p class="blue-title">Product Title 3</p>
      Staring at 1900
      <br> Cras non metus sed odio tristique imperdiet.</br>
      <img src="materials/images/machine_b.jpg" class="img-responsive" alt="cereal" />
      <a class="bottom-link">Learn More</a>
    </div>
  </div>
  <div class="col-md-3 product-box">
    <div class="col-md-12 background-contain">
      <p class="blue-title">Product Title 4</p>
      Staring at 1900
      <br> Pellentesque mattis tellus ut molestie dapibus.</br>
      <img src="materials/images/candy_b.jpg" class="img-responsive" alt="cereal" />
      <a class="bottom-link">Learn More</a>
    </div>
  </div>
</div>
</div>

Answer 1

尝试使用 Bootstrap 类 -“container-fluid”。 这是 jsfiddle:https://jsfiddle.net/z5v6t048/

<div class="container-fluid">
<div class="row">
  <div class="col-sm-6 product-box">
        <div class="col-md-12 background-contain">
      <p class="blue-title">Product Title 1</p>
      Staring at $500
      <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <br>
      <div class="img-contain">
        <img src="materials/images/cereal_b.jpg" class="img-responsive" alt="cereal" />
      </div>
      <a class="bottom-link">Learn More</a>
    </div>
   </div>
   <div class="col-sm-6 product-box">
       <div class="col-md-12 background-contain">
      <p class="blue-title">Product Title 2</p>
      Staring at 1900
      <br/> Donec ornare magna sit amet erat molestie sollicitudin ac vitae lectus.
      <img src="materials/images/flower_b.jpg" class="img-responsive" alt="cereal" />
      <a class="bottom-link">Learn More</a>
    </div>
   </div>

</div>