以溢出的内容为中心

Question

我有一个动态创建的<a>标签列表（没有文字），我应用了背景图片。我使用<div>样式在float: left;容器中显示这些图标。

当图标行变得太长时，它会溢出并按预期开始新行。

如何将最后一行居中，或者将图标均匀地分布在整个行中？

Answer 1

酷..所以以行为中心，这就是你需要的：http://jsbin.com/uPeYaJE/1/edit

抓屏：

CSS：

.container{
  width:200px;
  background-color:#666666;
  overflow:auto;
  text-align:center;
}

.container a{
  display:inline-block;
  background: url('http://placekitten.com/34/34'); 
  background-repeat:no-repeat;
  background-size: 100%; 
  width: 34px; 
  height: 34px;
}

HTML：

<div class="container">
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
  </div>