CSS - 水平对齐

在这种情况下，什么是最好的方式让我的产品水平对齐？CSS - 水平对齐

CSS：

.cart-collaterals .cross-sells, 
    .cart-collaterals .cart_totals, 
    .cart-collaterals .shipping_calculator { 
    width: 48%; 
    float: right; 
    } 
    .cart-collaterals .cross-sells { 
    float: left; 
    } 
    .cart-collaterals .cross-sells ul.products li { 
    width: 48%; 
    margin-right: 3.8%; 
    } 
    .cart-collaterals .cross-sells ul.products li:nth-child(2n) { 
    margin-right: 0; 
    } 
    .cart-collaterals .cross-sells ul.products li.last { 
    margin-right: 3.8%; 
    }

HTML：

<div class="cross-sells"> 

     <h2>You may be interested in&hellip;</h2> 

     <ul class="products"> 

       <li class="post-430 product type-product status-publish hentry first instock"> 


    <a href="http://www.drdermacare.co.nz/product/skin-polishing-cloth/"> 

     <div class="img-wrap"><img width="400" height="319" src="http://www.drdermacare.co.nz/wp-content/uploads/2013/05/SkinPolishingCloth_7-400x319.jpg" class="attachment-shop_catalog wp-post-image" alt="SkinPolishingCloth_7" /></div> <!--/.wrap--> 
     <h3>Skin Polishing Cloth</h3> 


    <span class="price">NZD <span class="amount">&#36;12.95</span></span> 

    </a> 



    <a href="http://www.drdermacare.co.nz/product/skin-polishing-cloth/" rel="nofollow" data-product_id="430" data-product_sku="" class="learn_more button product_type_add_to_cart_button">Learn More</a><a href="/cart/?add-to-cart=430" rel="nofollow" data-product_id="430" data-product_sku="" class="add_to_cart_button button product_type_simple">Buy Now</a> 

</li> 

       <li class="post-436 product type-product status-publish hentry last instock"> 


    <a href="http://www.drdermacare.co.nz/product/sos-acne-prevention-pen-new/"> 

     <div class="img-wrap"><img width="328" height="400" src="http://www.drdermacare.co.nz/wp-content/uploads/2013/05/SOS-AcnePen-HIGH-RES_7-328x400.jpg" class="attachment-shop_catalog wp-post-image" alt="SOS-AcnePen HIGH RES_7" /></div> <!--/.wrap--> 
     <h3>SOS Acne Prevention Pen NEW!</h3> 


    <span class="price">NZD <span class="amount">&#36;24.95</span></span> 

    </a> 



    <a href="http://www.drdermacare.co.nz/product/sos-acne-prevention-pen-new/" rel="nofollow" data-product_id="436" data-product_sku="" class="learn_more button product_type_add_to_cart_button">Learn More</a><a href="/cart/?add-to-cart=436" rel="nofollow" data-product_id="436" data-product_sku="" class="add_to_cart_button button product_type_simple">Buy Now</a> 

</li> 

     </ul> 
    </div>

来源

2013-06-24 Jess McKenzie

试试这个

.product { display: inline-block; }

我只是尝试它和它的作品。

来源

2013-06-24 02:02:33

你能提供一个基于我上面的链接提琴 - 不能让他们预算 –

[小提琴]（http://jsfiddle.net/lloanalas/bxSE6/2/） –

我想产品的网格形成像jsfiddle.net/HxMmg –

我希望这是好的？

http://jsfiddle.net/bxSE6/1/

.products li { 
list-style-type:none; 
    text-align:center; 
}

来源

2013-06-24 01:47:49 sinisake

我之后产品产品对齐不是内容 –

您是指只是图像？ – sinisake

喜欢这个http://jsfiddle.net/HxMmg/ –

我建议：

.prooducts li { 
     float: left; 
}

来源

2013-06-24 01:52:06

这就是我在想什么，但它不对齐 –

嗯......你可以链接到你的网页，所以我可以看到它在做什么？或者你能描述它在做什么？我经常使用这种技术来进行基于网格的数据布局和导航菜单。您可能需要尝试为.products> li设置高度，因为变化的高度会破坏均匀的流动。 –

CSS - 水平对齐

回答

相关问题