Question

我希望有一个占据整个宽度的按钮的居中网格，但无论我尝试什么，我似乎无法让容器居中。

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

由于

var headers = ["H1","H2","H3","H4","H5","H6"];

    $(".accordion").click(function(e) {
      var target = e.target,
          name = target.nodeName.toUpperCase();

      if($.inArray(name,headers) > -1) {
        var subItem = $(target).next();

        //slideUp all elements (except target) at current depth or greater
        var depth = $(subItem).parents().length;
        var allAtDepth = $(".accordion p, .accordion div:not(.my-class)").filter(function() {
          if($(this).parents().length >= depth && this !== subItem.get(0)) {
            return true; 
          }
        });
        $(allAtDepth).slideUp("fast");

        //slideToggle target content and adjust bottom border if necessary
        subItem.slideToggle("fast",function() {
            $(".accordion :visible:last").css("border-radius","0 0 10px 10px");
        });
        $(target).css({"border-bottom-right-radius":"0", "border-bottom-left-radius":"0"});
      }
    });

CSS

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

您的主要问题是您的gridButton有

float: left;

相反，请使用

display: inline-block;

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

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

这是您更新的fiddle。

Answer 3

使用flexbox：

.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

5 个答案: