Как выровнять два <a/> в центр с помощью flexbox?

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 и .label использование Flexbox в display собственности

Почему выравнивание не работает, как я ожидал? Это потому, что 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>