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，或看看some of its other values。

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>

    <!-- 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>
</center>

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

3 个答案: