我正在执行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%,列也留有正确的空间(请参见图片)。
任何人都可以帮助我或给我一些想法吗?
添加文字对齐:居中;到您的专栏课。在您的ButtonZone中添加宽度:90%,边距:自动;使整个小组居中。
.ButtonZone {
width: 90%;
margin: auto;
}
.column {
float: left;
width: 15%;
padding: 5px;
text-align: center;
}