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

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

總結

以上是生活随笔為你收集整理的使用弹性布局来解决令人烦恼的垂直居中问题~~的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。