保證金0汽車並不在我的情況下工作

我試圖找到一個解決方案居中.team div中的.person div的。

我花了大約一個小時來弄清楚我做錯了什麼沒有成功。

即使頁面寬度發生變化，是否可以使.person div保持居中狀態？在我的情況下，我有一個靜態的width: 768px，但即使如此，我不能集中div的。

2013-02-19 WooCaSh

你只適用'保證金：0 auto'到'.team'所以只有該元素將在其父爲中心。它的父元素的'width'是什麼？如果您希望它以視口爲中心，則父視圖的「寬度」必須爲視口的100％。 – Sparky 2013-02-19 02:52:45

@ .team'元素的Sparky父母是'.content'。 '.content'具有'width：744px;'。您可以在jsFiddle示例中爲content class添加css。 – WooCaSh 2013-02-19 02:58:13

'.team'如何比父母更寬？你如何將一件東西放在一個沒有空間的地方？如果您希望它在視口中居中，那麼父視圖必須與視口一樣寬（100％），然後使用「margin：0 auto」。 – Sparky 2013-02-19 03:00:35

通過將人員類別設置爲display:inline-block而不是float:left。
然後，您可以將text-align:center應用到團隊課程。
這應該達到預期的效果。

.team { 
    text-align: center; 
    border: 1px solid green; 
    overflow: hidden; 
    width: 768px; 
    margin: 0 auto; 
    margin-top: 30px; 
} 

.person { 
    border:1px solid red; 
    text-align:left; 
    width: 200px; 
    display: inline-block; 

    &:nth-child(5n+1) { 
     margin-left: 0px; 
    }

我改變了邊框顏色僅用於測試目的。這裏

小提琴 - http://jsfiddle.net/sZNJG/7/

來源

2013-02-19 03:13:13 lukeocom

這就是我要找的。如果一切都會好的，我會接受你的回答。 – WooCaSh 2013-02-19 03:15:26

嘗試添加text-align: center;team類。請參閱jsfiddle example here。

來源

2013-02-19 03:06:51 Muleskinner

它改變了什麼？ – WooCaSh 2013-02-19 03:08:54

它將'.person' div放在'.team' div中。 – Muleskinner 2013-02-19 03:10:06

保證金0汽車並不在我的情況下工作

回答

相關問題