如何垂直对齐以下flex元素？

Question

我有一个简单的弹性设置：

＆＃13;

＆＃13;

.col-12 {
  display: flex
}

input {
  flex: 0 0 80%
}

label {
  flex: 0 0 20%
}

＆＃13;

<div class="col-12">
  <label>Label</label>
  <input type="text" value=""></input>
</div>

＆＃13;

＆＃13;

＆＃13;

但是，标签不是垂直对齐的：

我尝试了vertical-aligment: middle，但Message仍留在同一个地方。

这样做的正确方法是什么？

Answer 1

您需要使用值为align-items的{​​{1}}属性：

center

这是我在需要复习时经常提到的链接以及align-items: center; A Visual Guide to CSS3 Flexbox Properties的一些示例。

＆＃13;

＆＃13;

flexbox

＆＃13;

.col-12 {
  display: flex;
  align-items: center;
}

input {
  height: 36px;
  flex: 0 0 80%
}

label {
  flex: 0 0 20%
}

＆＃13;

＆＃13;

＆＃13;

PS <div class="col-12"> <label>Label</label> <input type="text" value=""> </div>没有结束标记，他们会void elements。有时也称为空元素。