Flexbox：在其框中垂直居中文本

Question

我正在尝试制作标签有时是两行的标签。我从 ul 方法开始，但切换到 flexbox 希望解决两个问题：(1) 使标签填充容器的宽度，以及 (2) 垂直居中标签。宽度填充有效，但居中无效。

每个人都说 justify-content:center 和 align-items:center 会做我想做的事，但他们显然只对框本身起作用，而不是对其中的文本起作用。要使文本水平居中，我可以使用 text-align: center，但我找不到任何可以使它垂直居中的东西。一个谣言提到 align-content:center 但这也没有效果。这是我一直在玩的Codepen： https://codepen.io/OsakaWebbie/pen/mdVrMYK所有带有/* nope */的行都是我根据各种谣言尝试过的东西。

我错过了什么？（有时候会怀念以前用表格来排版的日子，那时候这简直是小菜一碟...）

Answer 1

所以我查看了您的代码笔，在我看来您可能只需要编辑此 CSS 规则并添加以下内容：

li a.series-switcher {
    display: flex;
    align-items: center;
}

另一个小部件是 .flextabs a.series-switcher

添加 display: flex; 也解决了那里的问题。

希望对您有所帮助。

Answer 2

将此添加到您的 CSS 代码中：

.series-switcher {
 display: flex;
}

或者在您的情况下，将 display: flex; 添加到您的 .flextabs a.series-switcher class 中 CSS 也可以。

/* basic setup to simulate my environment */
#sidebar { width: 320px; padding: 0 30px; background-color: #eaeaea; }
.widget { clear:both; padding: 10px 0; }
ul { list-style: none; margin: 0; padding: 0;}
a { text-decoration: none; color: #666; }
a:hover { color: #000; }

/* list method */
#series-switcher-ul li {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle; /* nope */
}
li a.series-switcher {
  display: block;
  background-color: #ccc;
  border: 1px solid #999;
  border-radius: 8px 8px 0 0;
  padding: 0 15px;
  line-height: 0.8em;
  text-align: center;
  height: 2.5em;
  vertical-align: middle; /* nope */
}
li a.series-switcher.active {
  background-color: unset;
  color: #000;
  border-bottom-width: 0;
  
}

/* flexbox method */
.flextabs {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center; /* nope */
  justify-content: center; /* nope */
  align-content: center; /* nope */
  vertical-align: middle; /* nope */
}
.flextabs a.series-switcher {
  flex: auto;
  background-color: #ccc;
  border: 1px solid #999;
  border-radius: 8px 8px 0 0;
  height: 2.5em;
  padding: 0 15px;
  line-height: 0.8em;
  text-align: center;
  align-items: center; /* nope */
  justify-content: center; /* nope */
  align-content: center; /* nope */
  vertical-align: middle; /* nope */
}
.flextabs a.series-switcher.active {
  background-color: unset;
  color: #000;
  border-bottom-width: 0;
}

.series-switcher {
 display: flex;
}

<div id="sidebar">
  <div class="widget">
    <ul id="series-switcher-ul">
     <li><a href="#" class="series-switcher series-nt active">New<br>Testament</a></li><li><a href="#" class="series-switcher series-ot">Old<br>Testament</a></li><li><a href="#" class="series-switcher series-topics">Topics</a></li>
    </ul>
  </div>

  <div class="widget">
    <div class="flextabs">
     <a href="#" class="series-switcher series-nt active">New<br>Testament</a>
      <a href="#" class="series-switcher series-ot">Old<br>Testament</a>
     <a href="#" class="series-switcher series-topics">Topics</a>
    </div>
  </div>
</div>

Flexbox：在其框中垂直居中文本

Flexbox: vertically centering text in its box

css

vertical-alignment

flexbox