如何水平对齐不同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类 - ＆＃34;容器流体＆＃34;。 这是jsfiddle：https://jsfiddle.net/z5v6t048/

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.col-md-3{
	width: 24%;
	float: left;
	margin-left: 10px;
}

.row{
margin: 0 auto;
  max-width: 1280px;
  width: 90%;

}