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