无法居中容器 div

Question

我想要一个占据整个宽度的居中按钮网格，但无论我尝试什么，我似乎都无法使容器居中。

这是 jsfiddle - https://jsfiddle.net/a6qo6tzL/

谢谢

<div class="Wrapper">
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
</div>
<div style="clear: both;"></div>

CSS

.Wrapper {
display:block;
margin: 0 auto;
width: 100%;
}

.gridButton {
padding: 10px;
background-color: #ff5100;
color: #ffffff;
margin: 5px;
float: left;
width: 250px;
text-align: center;
text-transform: uppercase;
}

Answer 1

你的主要问题是你的gridButton有

float: left;

改为使用

display: inline-block;

现在您的按钮可以彼此并排自由移动并居中。您的包装器元素已经是全宽，但您需要告诉它使其内容居中：

.Wrapper {
  display:block;
  width: 100%;
  text-align: center;
}

您可以删除 margin: 0 auto，因为这只会影响已知宽度的块。

.Wrapper {
  display: block;
  text-align: center;
  width: 100%;
}
.gridButton {
  padding: 10px;
  background-color: #ff5100;
  color: #ffffff;
  margin: 5px;
  display: inline-block;
  width: 250px;
  text-align: center;
  text-transform: uppercase;
}

<div class="Wrapper">
  <div class="gridButton">
    Test
  </div>
  <div class="gridButton">
    Test
  </div>
  <div class="gridButton">
    Test
  </div>
  <div class="gridButton">
    Test
  </div>
  <div class="gridButton">
    Test
  </div>
  <div class="gridButton">
    Test
  </div>
  <div class="gridButton">
    Test
  </div>
</div>
<div style="clear: both;"></div>

Answer 2

您已将 .Wrapper 设置为 100% 宽度，因此即使您将 margin: auto 设置为宽度，容器也是全宽的并且不会显示为居中。在较高的断点处将其设置为恒定宽度：

@media (min-width: 500px) {
  .Wrapper {
    width: 500px;
  }
}

然后考虑将按钮包装在一列中：

.cell {
  float: left;
  width: 50%;
}

这是您更新后的 fiddle。

Answer 3

使用弹性框：

.Wrapper {
  display:flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin: 0 auto;
  width: 100vw;
}

DEMO

我也把宽度换成了viewport units

Answer 4

看看这里是不是你想要的 https://jsfiddle.net/Raider/744wv0o7/

.Wrapper {
  display:block;
  margin: 0 auto;
  width: 100%;
    border:1px solid;
}

.gridButton {
  padding: 10px;
  background-color: #ff5100;
  color: #ffffff;
  margin: 5px auto;
  /*float: left;*/
  width: 250px;
  text-align: center;
  text-transform: uppercase;
}

Answer 5

这是你需要的吗？

.Wrapper {
  display:block;
  margin: 0 auto;
  width: 100%;
}

.gridButton {
  padding: 10px;
  background-color: #ff5100;
  color: #ffffff;
  margin: 5px;
  width: 250px;
  text-align: center;
  margin:auto;
  text-transform: uppercase;
}

你在哪里使用 float:left; 属性这会阻止 div 居中

无法居中容器 div

Can't center container div

html

css

centering