如何在无序列表中完美地居中内容？

Question

我有一个无序的项目列表，我想让内容完美地集中在页面上，无论断点/屏幕尺寸是多少。我事先并不知道会有多少物品。有谁知道我怎么能用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>       

Answer 1

这样的东西？ ul带有默认的填充和边距，你需要专门删除它。

修改

将宽度设置为ul，添加margin：auto并将元素浮动到左侧。这有帮助吗？

编辑：2

将显示块设置为图像并设置宽度：100％，高度自动;

修改：3

您可以为li（s）添加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>

Answer 2

您需要将ul设置为100％宽度且无边距并使用块作为li元素，否则您将获得多列：

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

Answer 3

如果有疑问，自动边距通常可以解决图像中的大多数居中问题

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

或只是

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

Answer 4

您只需在text-align: center上添加<ul>。

JsFiddle