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 - 水平對齊

回答

相關問題