css - 如何将无序列表中的内容完美居中？

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

将显示 block 设置为图像并设置宽度:100%，高度自动；

编辑:3

您可以向 li 添加 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>