html - 居中溢出的内容

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>