使用彈性布局來解決令人煩惱的垂直居中問題~~

今天在公司做項目的時候，遇到一個讓我無從下手的問題。

 

 

這樣的一個父容器DIV包含連個不同的span標簽。標簽內的字體不一樣，要如何實現兩個標簽在中軸線上實現垂直居中呢？

其他辦法我實在想不出來，於是在同事的建議下使用了彈性布局，也就是flex。

 

下面簡單的介紹一下flex布局。可參考阮一峰的flex布局：語法篇

 

Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。

可以在任何容器上使用；

例子：

在塊狀元素中

div{
  display: flex;  //
}

在行內元素可使用line-flex：

.box{
  display: inline-flex;
}

注：Webkit內核的瀏覽器，必須加上-webkit前綴。 即應寫為： -webkit-flex

 

使用display：flex的容器可看做一個父容器，父容器有以下6總屬性。可根據需要類使用。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

每種屬性的詳細介紹請看上面的阮一峰的文章連接。

這里介紹一下我實現上面的例子用到的屬性：

• align-items

align-items屬性定義項目在交叉軸上如何對齊。有五個值：

flex-start //可以理解為top
flex-end //理解為bottom
center //以父容器y軸的中軸線為中心，所有子元素都垂直居中於該線
baseline //項目的第一行文字的基線對齊
stretch //如果項目未設置高度或設為auto，將占滿整個容器的高度

這里顯然使用center了。

然而這樣就解決問題了，綜合起來也就下面幾行代碼：

div{
  display: flex;
  align-items:center;
            
}
div span{
    font-size: 28px;
}    
div em{
  font-size: 12px;      
}