html - 中心 float 列表

Question

如何确保 float 列表始终居中？

http://jsfiddle.net/sbfoeuns/

我试过:

.blocks {
  float: left;
  position: relative;
  left: 50%;
}

.blocks-inner {
  float: left;
  position: relative;
  left: -50%;
}

但这并没有帮助(调整浏览器大小以查看)。

与此示例相比，我从以下位置获取代码:http://codepen.io/anon/pen/rxgoj

Answer 1

无论屏幕大小如何，这将使所有内容都居中，并使框保持最小宽度。

另外，我从无序列表中删除了 margin 和 padding，它们稍微偏离了中点。

FIDDLE

.blocks {
  width:100%;
}

.blocks-inner {
  width:80%;
    margin:0 auto;
}
.blocks ul {
    text-align:center;
    margin:0;
    padding:0;
}
.blocks li {
  display:inline-block;
}

.blocks li a {
    display:table-cell;
    vertical-align: middle;
  padding: 8px 12px;
  border-radius: 2px;
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  font-style: normal;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #818896;
  background:rgba(0, 0, 0, 0.02);
  min-width: 140px;
  height: 85px;
  vertical-align: middle;
  text-align: center;
}

.blocks li a:hover {
  text-decoration: none;
  background: #d674c0;
  color: #fff;
}