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

所以我查看了您的codepen，在我看来您可能只需要编辑此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;添加到CSS中的.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>

Flexbox：在其框内垂直居中放置文本

2 个答案: