html - 试图让 div 在父 div 中保持对齐

Question

出于某种原因，product-preview 在包含 product-preview-picture 时不想在 product-container 内保持垂直对齐> 和 product-preview-text。

在多次查看文本后，我无法弄清楚是什么原因造成的。

.product-container {
  display: block;
  background-color: white;
  margin-top: 100px;
  width: 1200px;
  height: 2500px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border: solid #232323 3px;
  position: relative;
}

.product-preview {
  display: inline-block;
  background-color: white;
  border: black solid 3px;
  width: 200px;
  height: 250px;
  margin: 20px;
  text-align: center;
}

.product-preview-picture {
  width: 180px;
  height: 150px;
}

.product-preview-text {
  margin: auto;
  width: 180px;
  height: 50px;
}

<div class="product-container">
  <div class="product-preview">
    <img class="product-preview-picture" src="http://miniimg8.rightinthebox.com/images/384x384/201210/pldeyv1350894557095.jpg" alt="TRASIG BILD">
    <p class="product-preview-text">Best chewing gum ever!</p>
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>
</div>

Answer 1

添加 vertical-align: middle; 到你的元素。

.product-container {
  display: block;
  background-color: white;
  margin-top: 100px;
  width: 1200px;
  height: 2500px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border: solid #232323 3px;
  position: relative;
}

.product-preview {
  display: inline-block;
  background-color: white;
  border: black solid 3px;
  width: 200px;
  height: 250px;
  margin: 20px;
  text-align: center;
  
  vertical-align: middle;
}

.product-preview-picture {
  width: 180px;
  height: 150px;
}

.product-preview-text {
  margin: auto;
  width: 180px;
  height: 50px;
}

<!-- product display container -->

<div class="product-container">
  <div class="product-preview">
    <img class="product-preview-picture" src="http://miniimg8.rightinthebox.com/images/384x384/201210/pldeyv1350894557095.jpg" alt="TRASIG BILD">
    <p class="product-preview-text">Best chewing gum ever!</p>
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>

  <div class="product-preview">
  </div>
</div>