如何完美地將內容置於無序列表中？

我有一個無序的項目列表，我想使內容完美集中在頁面上，而不管斷點/屏幕尺寸是什麼。我事先不知道會有多少物品。有誰知道我可以用CSS來完成這個任務嗎？我知道這可以用JavaScript來完成，但如果可能的話，我更喜歡只使用CSS。如何完美地將內容置於無序列表中？

截圖：

鏈接： http://jsfiddle.net/wrf39qev/1/

<ul> 
    <li><img src="http://lorempixel.com/230/265/city/1"></li> 
    <li><img src="http://lorempixel.com/230/265/city/2"></li> 
    <li><img src="http://lorempixel.com/230/265/city/3"></li> 
    <li><img src="http://lorempixel.com/230/265/city/4"></li> 
    <li><img src="http://lorempixel.com/230/265/city/5"></li> 
    <li><img src="http://lorempixel.com/230/265/city/6"></li> 
    <li><img src="http://lorempixel.com/230/265/city/7"></li> 
    <li><img src="http://lorempixel.com/230/265/city/8"></li> 
    <li><img src="http://lorempixel.com/230/265/city/9"></li> 
    <li><img src="http://lorempixel.com/230/265/city/10"></li> 
</ul>

來源

2015-10-12 Gabe

好的。我會在有一個時。 – Gabe

像這樣的事情？ ul帶有默認填充和邊距，您需要專門刪除它。

編輯

設置一個寬度與UL，加入餘量：汽車和浮動的元素到左側。這有幫助嗎？

編輯：2

設置顯示塊圖像和設定寬度：100％，高度汽車;

編輯：3

可以添加的33％的寬度的立（一個或多個），以確保該間隙是在任一側上相同。但是，如果您希望差距相同，並且您希望儘可能多地安裝圖像，則必須在斷點處使用媒體查詢。意思是說，你需要寫下類似的話：「從這個寬度到這個寬度，我需要一列中的5個圖像（20％）」等等。這是唯一的方法。

這會將內容移動到中心並左對齊項目。

ul { list-style-type: none;margin:0;padding:0; width:90%; display:block;margin: auto;} 
 
li { 
 
    display: block; 
 
    float:left; 
 
    padding: 10px; 
 
    width:50%; 
 
    box-sizing:border-box; 
 
} 
 

 

 
img{ 
 
    display:block; 
 
    width:100%; 
 
    height:auto; 
 
    } 
 

 

 
@media only screen and (max-width:1200px){ 
 
    li{ 
 
     width:25%; 
 
     } 
 
    } 
 

 

 
@media only screen and (max-width:900px){ 
 
    li{ 
 
     width:33% 
 
     } 
 
    }

<ul> 
 
    <li><img src="http://lorempixel.com/230/265/city/1"></li> 
 
    <li><img src="http://lorempixel.com/230/265/city/2"></li> 
 
    <li><img src="http://lorempixel.com/230/265/city/3"></li> 
 
    <li><img src="http://lorempixel.com/230/265/city/4"></li> 
 
    <li><img src="http://lorempixel.com/230/265/city/5"></li> 
 
    <li><img src="http://lorempixel.com/230/265/city/6"></li> 
 
    <li><img src="http://lorempixel.com/230/265/city/7"></li> 
 
    <li><img src="http://lorempixel.com/230/265/city/8"></li> 
 
    <li><img src="http://lorempixel.com/230/265/city/9"></li> 
 
    <li><img src="http://lorempixel.com/230/265/city/10"></li> 
 

 
</ul>

來源

2015-10-12 01:24:51

這是一個好的開始，但我只想將具有全部項目的行置於中間。如果最後一行沒有填滿，是否可以左對齊內容？例如，如果您查看以下截圖，則最後一行中的項目與倒數第二行的第二項對齊。我希望它與第一項相符。屏幕截圖： http://imgur.com/uoU5veF – Gabe

謝謝，但不幸的是，這是行不通的。通過設置li的寬度爲33.33％，它將確保最多每行3個項目。我希望每條線在去下一行之前儘可能多地安裝圖像。 – Gabe

是的，刪除了33％的寬度條件。現在好嗎？ –

您需要設置uL至100％的寬度和無餘量和使用塊li元素，否則你會得到多個列：

ul { list-style-type: none; width: 100%; text-align:center; margin:0; padding:0;} 
li { 
    display: block; 
    margin: 10px; 
}

來源

2015-10-12 01:29:40 bitfiddler

在當懷疑，當涉及到圖像時，汽車邊距通常會修復大多數居中問題

li { 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto 
}

或者只是

li { 
    display: inline-block; 
    margin: auto; 
}

來源

2015-10-12 01:29:55

你只需要在你的<ul>添加text-align: center。

JsFiddle

來源

2015-10-13 08:44:26

如何完美地將內容置於無序列表中？

回答

相關問題