如何垂直對齊下面的柔性元素？

Question

我有一個簡單的Flex設置：

.col-12 { 
 
    display: flex 
 
} 
 

 
input { 
 
    flex: 0 0 80% 
 
} 
 

 
label { 
 
    flex: 0 0 20% 
 
}

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

然而，標籤不垂直對齊：

我試圖vertical-aligment: middle但Message住在同一地點。

這樣做的正確方法是什麼？

Answer 1

您需要使用align-items屬性與價值center：

​​

下面是我經常提及的，當我需要複習和一些例子，當涉及到flexbox鏈接：A Visual Guide to CSS3 Flexbox Properties。

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

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

 
label { 
 
    flex: 0 0 20% 
 
}

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

PS<input>■不要關閉標籤，他們void elements。有時簡稱爲空元素。