html - div中的网格列

Question

我在我的网站中创建了一个网格，它看起来像这样。我不知道为什么，但是当字符变得太长时，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 { 垂直对齐：中间；}

Answer 2

试试这个 .product-wrapper{ margin: 0 auto; 显示：表格；文本对齐：居中；}

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

                 display: block;
              float:left;
                  font-weight: bold;
                   margin: 0 10px;
                   overflow: hidden;
                  width: 200px;
                  word-wrap: break-word;
                    }