成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Sanchi / 3226人閱讀

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

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

入個(gè)門

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

//html

我要垂直居中

//css
div {
  padding: 10px;
  height: 120px;
  line-height: 120px;
  font-size: 16px;
  background: pink;
}

效果如下圖：

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

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

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

jsfillder中的例子

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

進(jìn)個(gè)階

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

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

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

//html


  
  我要豎直居中


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

效果卻是這樣的：

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

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

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

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

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

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

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

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

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

可以發(fā)現(xiàn)，設(shè)置值為middle就是我們想要的結(jié)果。

另外，vertical-align還可以設(shè)置百分比和數(shù)值，當(dāng)設(shè)置為負(fù)值時(shí)，圖片會向下移動。

萬萬沒想到：用flex兩行代碼就實(shí)現(xiàn)了 ●０●

只要給容器加上下面兩條樣式，就成功垂直居中了，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 布局教程：實(shí)例篇

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50666.html

相關(guān)文章

  • CSS元素垂直居中【內(nèi)含vertical-align 與 line-height 屬性詳解】

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

    frontoldman 評論0 收藏0

  • CSS魔法堂：深入理解line-height和vertical-align

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

    avwu 評論0 收藏0

  • 前端-CSS3&H5

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

    xiaolinbang 評論0 收藏0

  • CSS 行內(nèi)布局實(shí)踐小結(jié)

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

    Taste 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<