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

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

 

 

這樣的一個父容器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;      
}