試圖讓div在父div中保持對齊

Question

由於某些原因， product-preview在包含product-preview-picture和product-preview-text時不希望在product-container內保持垂直對齊。

在看了很多遍文字之后，我不知道是什么原因造成的。

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

Answer 2

您可以在.product-preview上使用vertical-align來保持其對齊

 .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: top; } .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 3

添加vertical-align: top .product-preview預覽選擇器的vertical-align: top

 .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; vertical-align: top; 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 4

嘗試這個

.product-preview {
   vertical-align: middle;
}

Answer 5

.product-review的移位是由p標簽引起的。

嘗試將p標簽放在圖片之前。

它將移動父div，因此p標簽位於下一個div的最后一行。

不幸的是，我在互聯網上找不到關於p標簽行為的任何信息。

但是您可以通過添加overflow: auto or hidden來中和它overflow: auto or hidden對父對象overflow: auto or hidden （ .product-review ）。 如果您能找到解釋，請分享。

.product-preview { overflow: auto; }