使用CSS居中標籤

Question

我在我的網站上選中標籤菜單時出現問題。我已經嘗試了幾個以前在其他問題上發佈過的解決方案，但由於他們沒有爲我工作，我希望你也能幫助我。

/*----- Tab Links -----*/ 
 

 

 
/* Clearfix */ 
 

 
.tab-links:after { 
 
    display: block; 
 
    clear: both; 
 
    content: ''; 
 
} 
 

 
.tab-links { 
 
    width: 100%; 
 
    border-bottom: 1px solid #e6e6e6; 
 
    margin: auto 0; 
 
    margin-bottom: 15px; 
 
} 
 

 
.tab-links li { 
 
    margin: auto 0; 
 
    margin-left: 2px; 
 
    /*float:left;*/ 
 
    display: inline-block; 
 
    list-style: none; 
 
} 
 

 
.tab-links a { 
 
    padding: 9px 10px; 
 
    display: inline-block; 
 
    font-size: 12px; 
 
    font-weight: 600; 
 
    color: #808080; 
 
    text-decoration: none; 
 
    text-align: center; 
 
} 
 

 
.tab-links a:hover { 
 
    color: #2ebb98; 
 
} 
 

 
li.active a, 
 
li.active a:hover { 
 
    color: #2ebb98; 
 
    border-bottom: 2px solid #2ebb98; 
 
}

<ul class="tab-links"> 
 
    <li class="active"><a href="#tab1">Tab One</a></li> 
 
    <li><a href="#tab2">Tab two</a></li> 
 
    <li><a href="#tab3">Tab three</a></li> 
 
    <li><a href="#tab4">Tab four</a></li> 
 
    <li><a href="#tab5">Tab five</a></li> 
 
    <li><a href="#tab6">Tab six</a></li> 
 
    <li><a href="#tab7">Tab seven</a></li> 
 
</ul>

每個標籤的文本是很好的中心，但僅在實際的菜單不居中。有沒有人有任何想法如何讓它居中？

Answer 1

由於您<li> s爲inline-block，你可以添加一個padding-left:0;（默認情況下，瀏覽器添加填充到ul）和text-align:center;你<ul>。

/*----- Tab Links -----*/ 
 
/* Clearfix */ 
 
.tab-links:after { 
 
    display:block; 
 
    clear:both; 
 
    content:''; 
 
} 
 

 
.tab-links { 
 
    width: 100%; 
 
    border-bottom: 1px solid #e6e6e6; 
 
    margin: auto 0; 
 
    margin-bottom: 15px; 
 
    text-align: center; 
 
    padding-left: 0; 
 
} 
 
.tab-links li { 
 
    margin: auto 0; 
 
    margin-left: 2px; 
 
    /*float:left;*/ 
 
    display: inline-block; 
 
    list-style:none; 
 
} 
 

 
.tab-links a { 
 
    padding:9px 10px; 
 
    display:inline-block; 
 
    font-size:12px; 
 
    font-weight:600; 
 
    color:#808080; 
 
    text-decoration: none; 
 
    text-align: center; 
 
} 
 

 
.tab-links a:hover { 
 
    color:#2ebb98; 
 
} 
 

 
li.active a, li.active a:hover { 
 
    color:#2ebb98; 
 
    border-bottom: 2px solid #2ebb98; 
 
}

<ul class="tab-links"> 
 
    <li class="active"><a href="#tab1">Tab One</a></li> 
 
    <li><a href="#tab2">Tab two</a></li> 
 
    <li><a href="#tab3">Tab three</a></li> 
 
    <li><a href="#tab4">Tab four</a></li> 
 
    <li><a href="#tab5">Tab five</a></li> 
 
    <li><a href="#tab6">Tab six</a></li> 
 
    <li><a href="#tab7">Tab seven</a></li> 
 
</ul>

Answer 2

使元素flex是證明內容的好方法。

.tab-links { 
    display: flex; 
    justify-content: center; 
} 

Answer 3

您在.tab-links中的內容是inline-block。

只需將text-align: center;添加到.tab-links即可。

就是這樣。

.tab-links { 
    text-align: center; 
} 

DEMO

/*----- Tab Links -----*/ 
 

 

 
    /* Clearfix */ 
 
    .tab-links:after { 
 
     display: block; 
 
     clear: both; 
 
     content: ''; 
 
    } 
 

 
    .tab-links { 
 
     width: 100%; 
 
     border-bottom: 1px solid #e6e6e6; 
 
     margin: auto 0; 
 
     margin-bottom: 15px; 
 
     
 
     /* UPDATED CODE */ 
 
     
 
     text-align: center; 
 
    } 
 

 
    .tab-links li { 
 
     margin: auto 0; 
 
     margin-left: 2px; 
 
     /*float:left;*/ 
 
     display: inline-block; 
 
     list-style: none; 
 
    } 
 

 
    .tab-links a { 
 
     padding: 9px 10px; 
 
     display: inline-block; 
 
     font-size: 12px; 
 
     font-weight: 600; 
 
     color: #808080; 
 
     text-decoration: none; 
 
     text-align: center; 
 
    } 
 

 
    .tab-links a:hover { 
 
     color: #2ebb98; 
 
    } 
 

 
    li.active a, 
 
    li.active a:hover { 
 
     color: #2ebb98; 
 
     border-bottom: 2px solid #2ebb98; 
 
    }

<ul class="tab-links"> 
 
     <li class="active"><a href="#tab1">Tab One</a></li> 
 
     <li><a href="#tab2">Tab two</a></li> 
 
     <li><a href="#tab3">Tab three</a></li> 
 
     <li><a href="#tab4">Tab four</a></li> 
 
     <li><a href="#tab5">Tab five</a></li> 
 
     <li><a href="#tab6">Tab six</a></li> 
 
     <li><a href="#tab7">Tab seven</a></li> 
 
    </ul>