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なので、あなたが<ul>にpadding-left:0;（デフォルトでは、ブラウザがulにパディングを追加）とtext-align:center;を追加することができます。

/*----- 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

要素のフレックスは、内容を正当化するための良い方法であることを確認してください。

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

Answer 3

.tab-linksの内容はinline-blockです。

.tab-linksにtext-align: center;を追加するだけです。

これだけです。

.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>