並非如此簡單的DIV的水平中心

所以我已經完成了研究，並瞭解了保證金：0的自動技巧，但我一直未能實現它。並非如此簡單的DIV的水平中心

如果您導航到http://CIRRUSFitness.com並在主頁上找到第二個滑塊，您將看到我的意思。如果產品少於4個，則產品偏離側面。

我相信我要使用的代碼如下

.catalog .items { width: 1004px; margin: 0 auto; } 
.catalog .item-block-1 { width: 210px; margin: 0 25px -25px 0; }

我曾嘗試以下

.catalog .items { width: 100%; margin: 0 auto; } 
.catalog .item-block-1 { width: 210px; margin: 0 auto; }

我可能需要居中.catalog內.items？唯一的目錄編號是

.catalog { padding: 0 0 52px 0; }

它可能會更容易有人來檢查網站，看看有什麼我做錯了使用他們的開發工具，但我更願意提供任何缺少的信息更多。

感謝您的幫助球員..我知道這是一個簡單的修復，但我做了一些根本性的錯誤，希望有人可以指出我。

來源

2015-09-08 Alan

本質上，我希望他們的行爲像http://stackoverflow.com/questions/17188455/how-to-center-multiple-divs-inside-a-container-in-css – Alan

最簡單的解決方案將刪除寬度：1004px from .catalog .items，並添加 display：flex; display：-webkit-flex; justify-content：center; -webkit-justify-content：center; to .catalog。 –

你只是想將文本居中在元素中嗎？如果這是這樣只需添加

.catalog .items { width: 100%; margin: 0 auto; text-align:center; }

，如果你想要的元素本身爲中心，寬度應小於100％時，儘量

.catalog .items { width: 50%; margin: 0 auto; }

來源

2015-09-08 18:26:01 Jesse

我相信.catalog .items已經居中。如果沒有足夠的空間填充該滑塊的第二個幻燈片中顯示的空間，我希望實際的.items以.catalog爲中心。 – Alan

我這一個給你

了我一會兒

只需粘貼此代碼

.main-menu{float:left; 
    width:100%; 
    background:#fff; 
    overflow:hidden; 
    position:relative;} 

.main-menu ul { 
    clear:left; 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:0; 
    position:relative; 
    left:50%; 
    text-align:center; 
} 
.main-menu ul li { 
    display:block; 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:0; 
    position:relative; 
    right:50%; 
} 

.main-menu ul li a { 
    display:block; 
    margin:0 0 0 1px; 
    padding:3px 10px; 
    text-decoration:none; 
    line-height:1.3em; 
}

來源

2015-09-08 19:31:38

你確定這是給我的嗎？ – Alan

該死的，即時對不起，老兄，我試圖修復你的滑塊，並通過您的導航分心，然後完全忘記了爲什麼我在網頁上...... 無論如何，您的導航不居中頁面，如果你添加我發佈的代碼將得到一個完全中心的導航 –

並非如此簡單的DIV的水平中心

回答

相關問題