How can I horizontally center these 3 buttons-CodePudding

At first there were 4 buttons I only wanted 3 so I removed the 4th one and that's why I want to make the remaining 3 look horizontally centered, it looks weird because of the 4th button's blank space. I tried a few things but they didn't work out.

var tabButtons = document.querySelectorAll(".tabContainer .buttonContainer button");
var tabPanels = document.querySelectorAll(".tabContainer  .tabPanel");

function showPanel(panelIndex, colorCode) {
  tabButtons.forEach(function(node) {
    node.style.backgroundColor = "";
    node.style.color = "";
  });
  tabButtons[panelIndex].style.backgroundColor = colorCode;
  tabButtons[panelIndex].style.color = "white";
  tabPanels.forEach(function(node) {
    node.style.display = "none";
  });
  tabPanels[panelIndex].style.display = "block";
  tabPanels[panelIndex].style.backgroundColor = colorCode;
}
showPanel(0, '#f44336');

.title {
  color: #dc2d5e;
  text-align: center;
}

.tabContainer {
  width: 100%;
  height: 350px;
}

.tabContainer .buttonContainer {
  height: 15%;
  align-items: center;
  align-content: center;
  justify-content: center;
  text-align: center;
}

.tabContainer .buttonContainer button {
  width: 25%;
  height: 100%;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px;
  font-family: sans-serif;
  font-size: 18px;
  background-color: #eee;
}

.tabContainer .buttonContainer button:hover {
  background-color: #d7d4d4;
}

.tabContainer .tabPanel {
  height: 85%;
  background-color: gray;
  color: white;
  text-align: center;
  padding-top: 105px;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 22px;
  display: none;
}

<h1 >Recieved Data</h1>
<div >
  <div >
    <button onclick="showPanel(0,'#f44336')">Feedbacks</button>
    <button onclick="showPanel(1,'#4caf50')">Suggestions</button>
    <button onclick="showPanel(2,'#2196f3')">Messages</button>
  </div>
  <div >Tab 1:Content</div>
  <div >Tab 2:Content</div>
  <div >Tab 3:Content</div>
</div>

CodePudding user response：

You are really close, adding these two flex properties can obtain the desired solution:

.tabContainer .buttonContainer{
  display: flex;
  justify-content: space-between;
}

.title{
    color: #dc2d5e;
    text-align: center;
}
.tabContainer{
    width: 100%;
    height: 350px;
}

.tabContainer .buttonContainer{
    display: flex;
    height: 15%;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    text-align: center;
}

.tabContainer .buttonContainer button{
    width: 25%;
    height: 100%;
    float: left;
    border: none;
    outline:none;
    cursor: pointer;
    padding: 10px;
    font-family: sans-serif;
    font-size: 18px;
    background-color: #eee;
}
.tabContainer .buttonContainer button:hover{
    background-color: #d7d4d4;
}
.tabContainer .tabPanel{
    height: 85%;
    background-color: gray;
    color: white;
    text-align: center;
    padding-top: 105px;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 22px;
    display: none;
}

<h1 >Recieved Data</h1>
<div >
    <div >
        <button onclick="showPanel(0,'#f44336')">Feedbacks</button>
        <button onclick="showPanel(1,'#4caf50')">Suggestions</button>
        <button onclick="showPanel(2,'#2196f3')">Messages</button>
    </div>
    <div >Tab 1:Content</div>
    <div >Tab 2:Content</div>
    <div >Tab 3:Content</div>
</div>

This flexbox guide is my go-to any time I run into this type of issue!

CodePudding user response：

You just need to add this to your css !

.buttonContainer{
    display: flex;
}

CodePudding user response：

Since there are only 3 buttons now, I would just make each one's width a third.

You can accomplish this by doing:

.tabContainer .buttonContainer button{
    width: calc(100% / 3);
}

EDIT: So it would look like this:

var tabButtons = document.querySelectorAll(".tabContainer .buttonContainer button");
var tabPanels = document.querySelectorAll(".tabContainer  .tabPanel");

function showPanel(panelIndex, colorCode) {
  tabButtons.forEach(function(node) {
    node.style.backgroundColor = "";
    node.style.color = "";
  });
  tabButtons[panelIndex].style.backgroundColor = colorCode;
  tabButtons[panelIndex].style.color = "white";
  tabPanels.forEach(function(node) {
    node.style.display = "none";
  });
  tabPanels[panelIndex].style.display = "block";
  tabPanels[panelIndex].style.backgroundColor = colorCode;
}
showPanel(0, '#f44336');

.title {
  color: #dc2d5e;
  text-align: center;
}

.tabContainer {
  width: 100%;
  height: 350px;
}

.tabContainer .buttonContainer {
  height: 15%;
  align-items: center;
  align-content: center;
  justify-content: center;
  text-align: center;
}

.tabContainer .buttonContainer button {
  width: calc(100% / 3);
  height: 100%;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px;
  font-family: sans-serif;
  font-size: 18px;
  background-color: #eee;
}

.tabContainer .buttonContainer button:hover {
  background-color: #d7d4d4;
}

.tabContainer .tabPanel {
  height: 85%;
  background-color: gray;
  color: white;
  text-align: center;
  padding-top: 105px;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 22px;
  display: none;
}

<h1 >Recieved Data</h1>
<div >
  <div >
    <button onclick="showPanel(0,'#f44336')">Feedbacks</button>
    <button onclick="showPanel(1,'#4caf50')">Suggestions</button>
    <button onclick="showPanel(2,'#2196f3')">Messages</button>
  </div>
  <div >Tab 1:Content</div>
  <div >Tab 2:Content</div>
  <div >Tab 3:Content</div>
</div>

calc() is widely supported on modern browsers.