使用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>