Question

我想知道如何将display: flex容器中的项目设置为align-self: stretch并让它在同一时间在中间垂直对齐。

我创建了一个Fiddle来展示我的问题。元素＆＃34;我的徽标文字＆＃34; 应与＃34; My Banner＆＃34;处于同一垂直水平。和＃34;正确的容器＆＃34;

Answer 1

添加：

.logo {
  display: flex;
  align-items: center;
  height: 100%
}

Answer 2

如果My Logo Text是单行，您可以使用line-height:50px;来解决问题。

工作DEMO。

如果您想了解有关line-height的更多信息，请阅读：https://css-tricks.com/almanac/properties/l/line-height/

.flex-container{
  color: #fff;
  background: #3c3c3c;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-item {
  padding: 0 10px;
}
.logo{
  background: #f06;
  align-self: stretch;
  vertical-align: middle;
  line-height:50px;
}
.title{
  flex-grow: 1;
}

<div class="flex-container">
  <div class="flex-item logo">My Logo Text</div>
  <div class="flex-item title">My Banner</div>
  <div class="flex-item "><span>Right Container</span></div>
</div>

修改

如果您不想要“固定高度”，可以使用：

.logo { display: flex; align-items: center }

正如@wscourge在回答中说的那样。

Answer 3

我与align-self: stretch交换height:100%;并将display:flex添加到.logo本身。这使.logo本身的内容居中，同时保持100％的高度。

https://jsfiddle.net/fw5pttme/3/

Answer 4

我能够通过额外的div和第二次调用flex来做到这一点。可能有一个更清洁的解决方案。我会更多地玩它并告诉你。

.flex-container {
  color: #fff;
  background: #3c3c3c;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-item {
  padding: 0 10px;
}
.logo-container {
  display:flex;
  background: #f06;
  align-self: stretch;
}
.logo {
  align-self: center;
}
.title {
  flex-grow: 1;
}

<div class="flex-container">
  <div class="flex-item logo-container">
    <div class="logo">My Logo Text</div>
  </div>
  <div class="flex-item title">My Banner</div>
  <div class="flex-item "><span>Right Container</span>
  </div>
</div>

垂直对齐拉伸的弹性框项目

4 个答案: