html - div 中的网格列

Question

我在我的网站上创建了一个网格，它看起来像这样。我不知道为什么，但是当 Angular 色变得太长时，div 的位置就会被破坏。谁能帮我解决这个问题并解释原因？

图片:

我的CSS

   .product-wrapper{
    margin: 0 auto; 
    display: table;
    text-align: center; 
}
.product-holder{   
    display: inline-block; 
    width:220px;
    height: 150px;
    border:1px solid #666666;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 0 5px #666666;
    -webkit-box-shadow: 0 0 0 5px #666666;
    box-shadow: 0 0 5px #666666;  
}

.product-image{
    display: block;
    width: auto;
    height: 90px; 
    margin:10px; 
    border:1px solid #666666;
}
.product-caption{
    width: auto; 
    display: block;
    font-weight: bold;
    margin:0 10px; 
    word-wrap:break-word; 
} 

我的html

  <div class="product-wrapper">
                        <div class="product-holder"> 
                            <span class="product-image"></span>
                            <span class="product-caption">Simple Product Name</span>
                        </div>
                        <div class="product-holder"> 
                            <span class="product-image"></span>
                            <span class="product-caption">AveryVeryverylongPRoductNamewithoutspace</span>
                        </div>
                        <div class="product-holder"> 
                            <span class="product-image"></span>
                            <span class="product-caption">AveryVeryverylongPRoductNamewithoutspace</span>
                        </div>
                        <div class="product-holder"> 
                            <span class="product-image"></span>
                            <span class="product-caption">Products</span>
                        </div>
                       <div class="product-holder"> 
                            <span class="product-image"></span>
                            <span class="product-caption">A productNamefor Sample</span>
                        </div>
                        <div class="product-holder"> 
                            <span class="product-image"></span>
                            <span class="product-caption">Another Product</span>
                        </div>
                    </div>

Answer 1

将此添加到 .product-holder

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