如何使用 CSS 和 JavaScript 将标签居中？

Question

我想在我的网页上创建一个居中的标签。 我尝试了在此站点上找到的几种解决方案，但对我来说效果不佳。

我使用标签作为按钮，它是一个完整的页面标签。 我的代码很简单，我还添加了注释以更好地理解。 下面是我的代码片段，希望你能帮助我。

 function openPage(evt, pageName) { // Declare all variables var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // Show current tab, and add an "active" class to the button that opened the tab document.getElementById(pageName).style.display = "block"; evt.currentTarget.className += " active"; } document.getElementById("defaultOpen").click();

 /* Full page tabs */ body,html { height: 100%; margin: 0; font-family: Arial; } /* Style the tab */ .tab { overflow: hidden; border: 1px solid #ccc; background-color: #03A9F5; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); } /* Style the buttons */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; width: 24%; } /* Background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { border-bottom: 3px solid #FFFFFF; color: #E1FBFF; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; background-color: #EEEEEE; height: 100%; }

 <!-- Tab links --> <div class="tab"> <button id="defaultOpen" class="tablinks" onclick="openPage(event, 'tab1')">TAB1</button> <button class="tablinks" onclick="openPage(event, 'tab2')">TAB2</button> <button class="tablinks" onclick="openPage(event, 'tab3')">TAB3</button> </div> <!-- Tab content --> <div id="tab1" class="tabcontent"> <h3>Tab1</h3> </div> <div id="tab2" class="tabcontent"> <h3>Tab2</h3> </div> <div id="tab3" class="tabcontent"> <h3>Tab3</h3> </div>

Answer 1

现在对齐内容的最简单方法通常是使用“Flexbox” ——在这种情况下， justify-content 。

.tab {
  display: flex;
  justify-content: center; // centers its children
}

 function openPage(evt, pageName) { // Declare all variables var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // Show current tab, and add an "active" class to the button that opened the tab document.getElementById(pageName).style.display = "block"; evt.currentTarget.className += " active"; } document.getElementById("defaultOpen").click();

 /* Full page tabs */ body,html { height: 100%; margin: 0; font-family: Arial; } /* Style the tab */ .tab { display: flex; justify-content: center; overflow: hidden; border: 1px solid #ccc; background-color: #03A9F5; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); } /* Style the buttons */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; width: 24%; } /* Background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { border-bottom: 3px solid #FFFFFF; color: #E1FBFF; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; background-color: #EEEEEE; height: 100%; }

 <!-- Tab links --> <div class="tab"> <button id="defaultOpen" class="tablinks" onclick="openPage(event, 'tab1')">TAB1</button> <button class="tablinks" onclick="openPage(event, 'tab2')">TAB2</button> <button class="tablinks" onclick="openPage(event, 'tab3')">TAB3</button> </div> <!-- Tab content --> <div id="tab1" class="tabcontent"> <h3>Tab1</h3> </div> <div id="tab2" class="tabcontent"> <h3>Tab2</h3> </div> <div id="tab3" class="tabcontent"> <h3>Tab3</h3> </div>

---

如果您希望标签居中但分布在周围，您也可以使用justify-content: space-around around ，或者查看它的一些其他值。

Answer 2

只需更新 css 的这一部分

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #03A9F5;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
    text-align:center; /*add this to center the buttons*/
}
/* Style the buttons */
.tab button {
    background-color: inherit;
    /*float: left;*/ /*remove floats*/
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    width: 24%;
     border-bottom: 3px solid transparent;/*Add this to prevent flickering/jumping*/
}

 function openPage(evt, pageName) { // Declare all variables var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // Show current tab, and add an "active" class to the button that opened the tab document.getElementById(pageName).style.display = "block"; evt.currentTarget.className += " active"; } document.getElementById("defaultOpen").click();

 /* Full page tabs */ body,html { height: 100%; margin: 0; font-family: Arial; } /* Style the tab */ .tab { overflow: hidden; border: 1px solid #ccc; background-color: #03A9F5; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); text-align:center; } /* Style the buttons */ .tab button { background-color: inherit; /*float: left;*/ border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; width: 24%; border-bottom: 3px solid transparent; } /* Background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { border-bottom: 3px solid #FFFFFF; color: #E1FBFF; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; background-color: #EEEEEE; height: 100%; }

 <!-- Tab links --> <div class="tab"> <button id="defaultOpen" class="tablinks" onclick="openPage(event, 'tab1')">TAB1</button> <button class="tablinks" onclick="openPage(event, 'tab2')">TAB2</button> <button class="tablinks" onclick="openPage(event, 'tab3')">TAB3</button> </div> <!-- Tab content --> <div id="tab1" class="tabcontent"> <h3>Tab1</h3> </div> <div id="tab2" class="tabcontent"> <h3>Tab2</h3> </div> <div id="tab3" class="tabcontent"> <h3>Tab3</h3> </div>

Answer 3

这是您要找的吗？

 function openPage(evt, pageName) { // Declare all variables var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // Show current tab, and add an "active" class to the button that opened the tab document.getElementById(pageName).style.display = "block"; evt.currentTarget.className += " active"; } document.getElementById("defaultOpen").click();

 /* Full page tabs */ body,html { height: 100%; margin: 0; font-family: Arial; } /* Style the tab */ .tab { overflow: hidden; border: 1px solid #ccc; background-color: #03A9F5; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); } /* Style the buttons */ .tab button { background-color: inherit; float: inherit; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; width: 24%; } /* Background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { border-bottom: 3px solid #FFFFFF; color: #E1FBFF; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; background-color: #EEEEEE; height: 100%; }

 <center> <!-- Tab links --> <div class="tab"> <button id="defaultOpen" class="tablinks" onclick="openPage(event, 'tab1')">TAB1</button> <button class="tablinks" onclick="openPage(event, 'tab2')">TAB2</button> <button class="tablinks" onclick="openPage(event, 'tab3')">TAB3</button> </div> </center> <!-- Tab content --> <div id="tab1" class="tabcontent"> <h3>Tab1</h3> </div> <div id="tab2" class="tabcontent"> <h3>Tab2</h3> </div> <div id="tab3" class="tabcontent"> <h3>Tab3</h3> </div>