居中浮动列表

Question

如何确保浮动列表始终居中？

我尝试了以下方法：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。

- user429620

---

不要使用浮动（floats）……请使用“内联块级元素”（inline-block）。居中浮动元素很 困难，浮动并不适合这样做。 - Paulie_D

为什么不直接使用你在CodePen中找到的代码呢？ - Andrew

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;
}

- codyogden

Answer 2

请查看下面的代码。如果你想让父元素中心对齐多个子元素，请在父元素CSS中添加text-center，并在子元素数量上添加display:inline-block。

.blocks {
  position: relative;
  width: 100%;
}
.blocks-inner {
  position: relative;
  width: 100%;
  text-align: center;
}
.blocks li {
  display: inline-block;
  margin: 4px;
}
.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);
  width: 140px;
  height: 85px;
  vertical-align: middle;
  text-align: center;
}
.blocks li a:hover {
  text-decoration: none;
  background: #d674c0;
  color: #fff;
}

<div class="blocks">
  <div class="blocks-inner">
    <ul>
      <li><a href="">test</a>
      </li>
      <li><a href="">test</a>
      </li>
      <li><a href="">test</a>
      </li>

      <li><a href="">test</a>
      </li>
    </ul>
  </div>
</div>
<div style="clear:both"></div>

- Nilesh Mahajan

Answer 3

您可以简化HTML，不需要额外嵌套的div.blocks-inner。

首先，将display: table应用于ul，以获取一个收缩到适合大小的块级元素来包装链接元素。然后，您可以使用margin: 0 auto将ul居中。

将display: inline-block应用于li，这将使这些元素保持内联，并使用vertical-align: top来解决基线空白问题。请注意，这为您提供了一种使用margin-right控制链接之间间距的好方法，并查看下一个带有:last-child的规则来整理最后一个li元素。

其他所有样式都很好。

请注意，对于小屏幕宽度，链接元素将换行到第二行，但可以修复，具体取决于您的整体设计目标。

.blocks {
  border: 1px dotted blue;
}
.blocks ul {
  border: 1px dashed blue;
  display: table;
  margin: 0 auto;
  padding: 0;
}
.blocks li {
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;
}
.blocks li:last-child {
  margin-right: 0;
}
.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);
  width: 140px;
  height: 85px;
  text-align: center;
}
.blocks li a:hover {
  text-decoration: none;
  background: #d674c0;
  color: #fff;
}

<div class="blocks">
  <ul>
    <li><a href="">test</a></li>
    <li><a href="">test</a></li>
    <li><a href="">test</a></li>
    <li><a href="">test</a></li>
  </ul>
</div>

- Marc Audet

Answer 4

移除两个 CSS 类

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

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

添加以下内容

.blocks-inner ul {
  display: table;
  margin: 0 auto;
  padding: 0;
}

JS Fiddle

{{链接1：JS Fiddle}}

- Kawinesh S K