CSS元素垂直居中【內含vertical-align 與 line-height 屬性詳解】

frontoldman 發布于2019-08-29 12:23 / 3248人閱讀

摘要：所以文字最終可以在整個中垂直居中顯示。默認值為，即把元素放在父元素的基線上。萬萬沒想到用兩行代碼就實現了只要給容器加上下面兩條樣式，就成功垂直居中了，都是多余了的。

請一定看到最后，flex太令人驚喜！ヾ(o???)?

入個門

先來考慮這樣一個問題：一行文字在一個固定高度的父div中怎樣做到垂直居中？
我們都知道設置父div的line-height 等于它的height就可以了，像下面這樣：

//html
我要垂直居中
//css
div {
  padding: 10px;
  height: 120px;
  line-height: 120px;
  font-size: 16px;
  background: pink;
}

效果如下圖：

原理也很簡單，line-height設置之后，文字的行高隨之改變。來看一下設置line-height后具體的改變方式：

用ling-height的值減去文字font-size的值，即(120 - 16) = 104px，把它們的差 `104 / 2
= 52px` 分別加到文字的上方和下方。所以文字最終可以在整個div中垂直居中顯示。

補充一點關于line-heihgt取值設置為百分比與設置為數字的不同：
假如當前元素font-size: 30px;我們想讓行高為字體大小的3倍，就會設置line-height: 300%; 或 line-height: 3;，而假如這個元素有一個子元素，字體設置為font-size: 16px;。那么設置為300%的時候，子元素的行高為90px，即先計算，后繼承；設置為3的時候，子元素的行高為48px，即先繼承下來，再計算。

jsfillder中的例子

只有文字的時候我們用上述方法就可以實現垂直居中，那么如果div中包含圖片和文字呢？

進個階

也就是寫這篇文章的實際問題來源：

一個div中包含兩個子元素：左側圖片，右側文字。已知圖片高度遠高于文字，怎樣做到圖片和文字都垂直居中呢？

如果依然使用上面設置line-height的方法：：

//html

  
  我要豎直居中

//css
div {
  padding: 10px;
  height: 160px;
  line-height: 160px;
  font-size: 16px;
  background: pink;
}
img {
  width: 70px;
  height: 70px;
}

效果卻是這樣的：

可以看到，只是文字居中了，圖片的位置不是我們想要的。原因是：圖片img有一個vertical-align屬性，定義的是行內元素的基線與元素所在行的基線在垂直方向上的位置關系。默認值為baseline，即把元素放在父元素的基線上。

【注意：這個元素始終參照元素行高哦！所以如果是想讓行高為14px的行內元素在一個50px高的div中垂直居中首先需要把該行內元素的line-height改為50px哦 ●ω●】

除了默認值，vertical-align還有以下幾種常見取值，依次來試一下吧：

（其中，若設置百分比，參照物是line-height的值。）

img { vertical-align: top; } //    把元素的頂端與行中最高元素的頂端對齊

img { vertical-align: bottom; } //把元素的頂端與行中最低元素的頂端對齊

img { vertical-align: text-top; } //把元素的頂端與父元素字體的頂端對齊

img { vertical-align: text-bottom; } //把元素的底端與父元素字體的底端對齊

img { vertical-align: middle; } //把此元素放置在父元素的中部

可以發現，設置值為middle就是我們想要的結果。

另外，vertical-align還可以設置百分比和數值，當設置為負值時，圖片會向下移動。

萬萬沒想到：用flex兩行代碼就實現了 ●０●

只要給容器加上下面兩條樣式，就成功垂直居中了，line-height都是多余了的。

display: flex;
align-items: center;

完整代碼是這樣：

//html

  
  我要豎直居中


//css
div {
  display: flex;
  align-items: center;
  padding: 10px;
  height: 160px;
  font-size: 16px;
  background: pink;
}
img {
  width: 70px;
  height: 70px;
}

So easy !
附上阮老師寫的flex教程：
Flex 布局教程：語法篇
Flex 布局教程：實例篇

參考資料：
http://www.w3school.com.cn/cs...
https://developer.mozilla.org...
http://stackoverflow.com/ques...
https://developer.mozilla.org...

云服務器 GPU云服務器垂直居中實現垂直居中水平垂直居中文字垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111863.html

CSS元素垂直居中【內含vertical-align 與 line-height 屬性詳解】

摘要：所以文字最終可以在整個中垂直居中顯示。默認值為，即把元素放在父元素的基線上。萬萬沒想到用兩行代碼就實現了只要給容器加上下面兩條樣式，就成功垂直居中了，都是多余了的。請一定看到最后，flex太令人驚喜！ヾ(o???)? 入個門先來考慮這樣一個問題：一行文字在一個固定高度的父div中怎樣做到垂直居中？我們都知道設置父div的line-height 等于它的height就可以了，像下面...

Sanchi 2019-08-01 16:40 評論0 收藏0
CSS魔法堂：深入理解line-height和vertical-align

摘要：下的屬性值詳解以下內容均在中測試默認對齊方式這里作為參考系，而它的就是所要對齊的了。沒有任何變化。那改變又如何呢為了讓的清晰可見，特意添加一個的包裹著。前言一直聽說line-height是指兩行文本的基線間的距離，然后又說行高等于行距，最近還聽說有個叫行間距的家伙，@張鑫旭還說line-height和vertical-align基情四射，貴圈真亂啊。。。。。。于是通過本篇來一探究竟...

avwu 2019-08-30 12:52 評論0 收藏0
前端-CSS3&H5

摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

xiaolinbang 2019-08-29 14:14 評論0 收藏0
CSS 行內布局實踐小結

摘要：相關內聯格式上下文主要影響內布局的行盒模型，這是一個顯示區域，根據塊狀容器內，每一行的多個內聯元素都會共同生成一個行盒模型。前言通常情況下，要使元素排列在一行內，通常做法就是使用float，然后再清浮動。如下：showImg(https://segmentfault.com/img/bVmVua); 但是如果要使其垂直居中，則必須手動調整，藍色或者綠色塊的位置，比較繁瑣。 ...

Taste 2019-08-28 18:13 評論0 收藏0