居中網站內容不工作？

-2

我試圖集中在這個wordpress頁面上的所有產品，以便一切都集中對齊，我試圖用下面的CSS將它們全部包裝在一個div中，但是這樣做是將內容包裝到中間，但產品是仍然與此保持一致。居中網站內容不工作？

#big-center { 
display: -webkit-box; 
display: -moz-box; 
display: box; 

-webkit-box-orient: block-axis; 
-moz-box-orient: block-axis; 
box-orient: block-axis; 

-webkit-box-align: center; 
-moz-box-align: center; 
box-align: center; 

-webkit-box-pack: center; 
-moz-box-pack: center; 
box-pack: center; 
}

我想知道是否有人有任何建議，或者如果有什麼我失蹤要做到這一點？

這裏是頁面的鏈接：http://www.stickems.co.uk/shop-screen-cleaners/

來源

2014-04-03 Matthew Solomon

通常這是通過'display：block; margin：auto;' - 但整個'div'已經集中在您的網站上。在頂部看看它的寬度。如果你把外面的'div'放在中間，這並不意味着它內部的每一行都是獨立的中心。 – OJFord

另外，從用戶體驗的角度來看，純粹以我的觀點來看：現在看起來比以任何方式爲中心更好。 – OJFord

請勿使用tinyURL或鏈接重定向服務。請簡單地發佈實際可點擊的網址或不要。 – Sparky

這是一個有點難以明白你真正的意思，但我花了一條縫它;沒有太清楚，因爲我認爲它看起來很好，但是這是與中心對齊的原因。雖然這不是完美的編碼，但它會幫助你。

轉到第1427行並在您的css中用以下命令更改當前的那個：可溼性粉劑內容/主題/ stickems/style.css中？版本= 1.0

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { 
    margin-bottom: 25px; 
    margin-left: 38%; 
    margin-right: 50%; 
    width: 22.125%; 
}

正如我所說的，它會做的伎倆，如果這是你的意思，但它並不是完美的編碼。從你的問題，這是我明白你想要的; http://i.imgur.com/sEV7rVe.png

來源

2014-04-03 17:17:55 iBrazilian2

Hi @ iBrazilian2不幸的是，雖然這個中心的一切（這是完美的），它將每個產品放到一個新的線上，而不是保持行格式目前？ –

整體而言，你想要做的就是將所有第一個

的中心放在中間，但仍然保持彼此相鄰？ – iBrazilian2

確切:)如果有任何幫助，我做了一個模擬的頁面看起來即時嘗試實現:) http://i.imgur.com/DyUMQzB.jpg –

如果這些風格變化對您有幫助，請嘗試。

.woocommerce ul.products li.product{ 
    float:left; //Remove this 
    display:inline-block; //Add this 
    margin-right:3.3%; // changed from 3.8 to 3.3 
} 

.woocommerce ul.products{ 
    text-align:center; //add this 
}

來源

2014-04-03 17:33:09 James

你好，謝謝你試圖幫助回答這個問題:)我將上面的CSS添加到我的網站，但它沒有多少運氣。我然後刪除了fload行，仍然沒有運氣 –

@MatthewSolomon你可以檢查這些樣式不會被其他樣式覆蓋你的css – James

我只是試過這個應用！重要的;到每一行，並刪除浮動這是結果：http://i.imgur.com/ErD9idc.jpg - 如果它是任何幫助我做了一個模擬的頁面看起來即時嘗試實現是:) http： //i.imgur.com/DyUMQzB.jpg –

居中網站內容不工作？

回答

相關問題