Flexbox：将文本垂直居中放置在其框内[复制] 。

Question

这个问题在这里已经有了答案:

Flexbox：水平和垂直居中。 (12个答案)

CSS在div块内将文字居中（水平和垂直）。 (25个答案)

如何在div中垂直对齐元素？ (28个回答)

如何在div中垂直排列文字？ (30个回答)

封闭 5天前.

我想用标签制作标签，有时是两行。我一开始用的是 ul 方法，但改用了 flexbox 希望解决两个问题。(1) 让标签填满容器的宽度，(2) 让标签垂直居中。宽度填充成功了，但居中却不行。

大家都说 justify-content:center 和 align-items:center 会做我想做的事，但它们显然只对方框本身起作用，而不是方框内的文字。要将文本水平居中，我可以使用 text-align: center但我找不到任何可以将其垂直居中的方法。有一个传言提到 align-content:center 但也没有效果。下面是我一直在玩的Codepen。https:/codepen.ioOsakaWebbiepenmdVrMYK。 所有的线都有 /* nope */ 是我根据各种传言白费心机的事情。

我到底缺了什么？有时候我很怀念我们用表格来排版的日子，在这种情况下，这将是小菜一碟......）。

Answer 1

在你的CSS代码中加入这个。

.series-switcher {
 display: flex;
}

或者在你的例子中添加 display: flex; 对你的 .flextabs a.series-switcher 类也可以使用。

/* 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>

Answer 2

所以我看了你的代码本，在我看来，你可能只需要编辑这个 CSS 规则并添加以下内容。

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

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

增加 display: flex; 也修复了那里的问题。

希望能帮到你。