Question

我有这个codepen https://codepen.io/luisguerra/pen/prROqY，我试图将每个项目中的文本垂直居中。

我想要的原因是我不知道列表中有多少项目，我希望它们以相同的高度分布，每个项目垂直居中（所有项目应该只有1行）但行高：100％不起作用，想法？

.site-content {
  height: 400px;
}

.menu {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.item {
  flex: 1;
}

 <div class="site-content">
      <div class="menu">
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
     </div>
</div>

Answer 1

由于justify-content: center为.menu，{p> flex-direction对column会有所帮助。

Answer 2

使用此代码 100％工作：

＆＃13;

.site-content {
  height: 400px;
}

.menu {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.item {
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

＆＃13;

 <div class="site-content">
      <div class="menu">
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
     </div>
</div>

＆＃13;

在Flex容器项目上垂直居中文本

2 个答案: