css - 如何使用 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 在display 属性中使用flexbox

为什么对齐不符合我的预期？是不是因为a不是 block 元素？

Answer 1

您需要将 justify-content: center 添加到您的 .tab 类中:

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