问题是使用居中按钮将6列正确放置在div中

Question

我正在执行Angular Material选项卡以更改应用程序的不同自定义类型，我想在该选项卡中放置6个居中按钮，但是我遇到了问题，因为它们没有居中并且在我居中尝试这样做，它们会水平放置。

Image - My tab and the buttons

.ButtonZone{

  display: table;
  width: 100%;


}

.column {

  float: left;
  width: 15%;
  padding: 5px;

}


#blue{
  background-color: blue;

}

#yellow{
  background-color: yellow;
}
#pink{
  background-color: deeppink;
}

#red{
  background-color: red;
}
#green{
  background-color: green;
}

#grey{
   background-color: grey;
}
button{
  height: 20px;
  width: 20px;
  border: 0;

}

<div class="ButtonZone">
<div class="column">
  <button id=blue></button>
</div>

<div class="column">
  <button id=yellow></button>
</div>

  <div class="column">
    <button id=pink></button>
  </div>

  <div class="column">
    <button id=red></button>
  </div>

  <div class="column">
    <button id=green></button>
  </div>

  <div class="column">
    <button id=grey></button>
  </div>


</div>

这些按钮位于每列的左侧，但是我希望将它们置于中间，但是我不能这样做。我尝试了很多事情，但是当我这样做时，它们会水平对齐。

我注意到的一件事是，即使宽度为100％，列也留有正确的空间（请参见图片）。

任何人都可以帮助我或给我一些想法吗？

Answer 1

添加文字对齐：居中；到您的专栏课。在您的ButtonZone中添加宽度：90％，边距：自动；使整个小组居中。

.ButtonZone {
  width: 90%;
  margin: auto;
}

.column {
  float: left;
  width: 15%;
  padding: 5px;
  text-align: center;
}

CodePen