Question

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

我试过了：

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

Answer 2

查看以下代码。问题是，如果您想在其父级的中心保留多个元素。将text-center添加到父级css，将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>

Answer 3

删除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

Answer 4

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

首先，将display: table应用于ul以获得一个缩小到适合的块级元素来包装您的链接元素。然后，您可以将ul与margin: 0 auto对齐。

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

其他具有a样式的东西都很好。

请注意，链接元素将换行到第二行以获得较小的屏幕宽度，但可以修复，详细信息取决于您的总体设计目标。

.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>

中心浮动列表

4 个答案: