I am currently working on customizing my app using an Angular Material Tab. My goal is to have 6 centered buttons inside the tab, but I'm encountering issues as they are not aligning properly and end up appearing horizontally.
Image - View of 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>Despite my efforts, the buttons remain on the left side of each column instead of being centered. I've experimented with various solutions but haven't achieved the desired result.
Notably, the columns seem to leave a right space (as shown in the image) even when set to width: 100%.
If anyone has suggestions or can provide guidance on how to resolve this issue, I would greatly appreciate it.