如何水平居中这 3 个按钮

Question

起初有 4 个按钮，我只想要 3 个，所以我删除了第 4 个，这就是为什么我想让剩下的 3 个看起来水平居中，它看起来很奇怪，因为第 4 个按钮是空白的 space。我尝试了一些方法，但没有成功。

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 class="title">Recieved Data</h1>
<div class="tabContainer">
  <div class="buttonContainer">
    <button onclick="showPanel(0,'#f44336')">Feedbacks</button>
    <button onclick="showPanel(1,'#4caf50')">Suggestions</button>
    <button onclick="showPanel(2,'#2196f3')">Messages</button>
  </div>
  <div class="tabPanel">Tab 1:Content</div>
  <div class="tabPanel">Tab 2:Content</div>
  <div class="tabPanel">Tab 3:Content</div>
</div>

Answer 1

你真的很接近，添加这两个flex属性可以得到想要的解决方案：

.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 class="title">Recieved Data</h1>
<div class="tabContainer">
    <div class="buttonContainer">
        <button onclick="showPanel(0,'#f44336')">Feedbacks</button>
        <button onclick="showPanel(1,'#4caf50')">Suggestions</button>
        <button onclick="showPanel(2,'#2196f3')">Messages</button>
    </div>
    <div class="tabPanel">Tab 1:Content</div>
    <div class="tabPanel">Tab 2:Content</div>
    <div class="tabPanel">Tab 3:Content</div>
</div>

这个 flexbox 指南是我 go-to 每当我运行遇到此类问题时！

Answer 2

由于现在只有 3 个按钮，所以我将每个按钮的宽度设为三分之一。

您可以通过以下方式完成此操作：

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

编辑：所以它看起来像这样：

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 class="title">Recieved Data</h1>
<div class="tabContainer">
  <div class="buttonContainer">
    <button onclick="showPanel(0,'#f44336')">Feedbacks</button>
    <button onclick="showPanel(1,'#4caf50')">Suggestions</button>
    <button onclick="showPanel(2,'#2196f3')">Messages</button>
  </div>
  <div class="tabPanel">Tab 1:Content</div>
  <div class="tabPanel">Tab 2:Content</div>
  <div class="tabPanel">Tab 3:Content</div>
</div>

现代浏览器广泛支持 calc()。

Answer 3

您只需将此添加到您的 css !

.buttonContainer{
    display: flex;
}

如何水平居中这 3 个按钮

How can I horizontally center these 3 buttons

html

javascript

css

center