將某些li的內部水平居中ul

我在集中位於ul元素內的li的某個問題。下面是相關代碼：將某些li的內部水平居中ul

ul.nav { 
    width: 1000px; 
    margin: 0 auto; 
    list-style-type: none; 
} 

.nav li { 
    float: left; 
    width: 300px; 
} 

#government { 
    clear: left; 
}

我一直在嘗試不同的東西，使它象使得li的工作有text-align: center;或給他們margin: 0 auto;，但似乎沒有奏效。我花了數小時試圖找出問題，所以任何幫助將非常感激。以下是對我的情況看起來像一個截圖：

我試圖讓li的到UL內水平居中。我不能只是做數學和設定保證金，因爲寬度將是十進制的，並且可能對於每一個李不會相同。

來源

2015-08-26 saadq

所以你想讓他們看起來就像在你的屏幕截圖（即兩排，每排兩個項目），但不能貼在左邊？ – user907860

是user907860，沒錯。 – saadq

你應該做一個小提琴。只是CSS是沒有用的。 – jmargolisvt

這應該給你一個良好的開端：

ul.nav { 
    width: 1000px; 
    margin: 0 auto; 
    list-style-type: none; 
    text-align: center; /* to center horizontally child inline elements */ 
} 

.nav li { 
    display: inline-block; /* Set to inline-block instead of float: left */ 
    width: 300px; 
}

更新

要進入到行，請你ul元素具有較小的寬度。

例如

ul.nav { 
    width: 800px; /* Smaller width */ 
    margin: 0 auto; 
    list-style-type: none; 
    text-align: center; /* to center horizontally child inline elements */ 
    padding-left: 0; 
}

Fiddle

來源

2015-08-26 04:24:26

這幫助我更接近我期望的結果，謝謝。我只需要弄清楚如何將它分成兩行。 – saadq

@meh_programmer我已經在評論中回答了你的問題。 –

將某些li的內部水平居中ul

回答

相關問題