用居中的按钮正确在div内放置6个列的问题

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％，collum也会离开该正确的空间（请参见图片）。

有人可以帮助我，也可以给我一些想法吗？

Answer 1

添加文字对齐：居中；列类。

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