如何使用flexbox將兩個<a/>與中心對齊？

Question

以下是我的html和css代碼。

.tab { 
 
    display: flex; 
 
    self-align: center; 
 
    align-items: center; 
 
    margin: auto; 
 
    width: 100%; 
 
    border: 1px solid red; 
 
} 
 

 
.section-title { 
 
    display: flex; 
 
    margin: 5px; 
 
} 
 
.label { 
 
    display: flex; 
 
    padding: 10px; 
 
} 
 
.label-a { 
 
    color: white; 
 
    background-color: green; 
 
} 
 
.label-b { 
 
    color: white; 
 
    background-color: orange; 
 
}

<div class=tab> 
 
    <a class=section-title> 
 
    <div class="label label-a">Tab a</div> 
 
    </a> 
 
    <a class=section-title> 
 
    <div class="label label-b">Tab b</div> 
 
    </a> 
 
</div>

目前，它提供了以下結果：

我的目標是使綠色和橙色框移動到紅色邊框的盒子的中心，就像這樣：

我已經嘗試了一些東西，比如：

1）使用margin: auto

2）確保.tab寬度爲100％。

3）.section-title和display財產

.label使用Flexbox的爲什麼，因爲我希望對齊不起作用？是否因爲a不是塊元素？

Answer 1

你需要證明內容添加：中心到你的.tab類：

.tab { 
    display: flex; 
    self-align: center; 
    align-items: center; 
    margin: auto; 
    width: 100%; 
    justify-content: center; 
    border: 1px solid red; 
} 

Answer 2

爲什麼不乾脆平原text-align: center？

.tab { 
 
    text-align: center; 
 
    width: 100%; 
 
    border: 1px solid red; 
 
} 
 

 
.section-title { 
 
    margin: 5px; 
 
} 
 
.label { 
 
    padding: 10px; 
 
    display: inline-block; 
 
} 
 
.label-a { 
 
    color: white; 
 
    background-color: green; 
 
} 
 
.label-b { 
 
    color: white; 
 
    background-color: orange; 
 
}

<div class=tab> 
 
    <a class=section-title> 
 
    <div class="label label-a">Tab a</div> 
 
    </a> 
 
    <a class=section-title> 
 
    <div class="label label-b">Tab b</div> 
 
    </a> 
 
</div>