今天在公司做項(xiàng)目的時(shí)候，遇到一個(gè)讓我無從下手的問題。

這樣的一個(gè)父容器DIV包含連個(gè)不同的span標(biāo)簽。標(biāo)簽內(nèi)的字體不一樣，要如何實(shí)現(xiàn)兩個(gè)標(biāo)簽在中軸線上實(shí)現(xiàn)垂直居中呢？

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

下面簡單的介紹一下flex布局?？蓞⒖既钜环宓膄lex布局：語法篇

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

可以在任何容器上使用；

例子：

在塊狀元素中

div{
  display: flex;  //
}

在行內(nèi)元素可使用line-flex：

.box{
  display: inline-flex;
}

注：Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴。 即應(yīng)寫為： -webkit-flex

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

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

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

這里介紹一下我實(shí)現(xiàn)上面的例子用到的屬性：

align-items

align-items屬性定義項(xiàng)目在交叉軸上如何對齊。有五個(gè)值：

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

這里顯然使用center了。

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。