four
資訊專欄INFORMATION COLUMN
摘要：部分樣式代碼總結(jié)因?yàn)橛玫牟欢嗥渌麑?duì)齊方式并沒有舉例。
起因
內(nèi)容垂直居中在前端布局中, 是經(jīng)常遇到的需求。雖然可以用 浮動(dòng) float、position:absolute、 來解決, 不過文檔流都會(huì)受到影響。
筆者常用的是 flex, 用起來順手, 有些地方用起來感覺小題大做, 于是就來探究一下 vertical-align 如何做到居中布局。
要明白 vertical-align 的布局規(guī)則, 有些概念還是要理清一下。
vertical-align 用來對(duì)齊行內(nèi)元素, 因此我們?cè)O(shè)置元素的 display 屬性為 inline、inline-block or inline-table, inline-table 用的不多, 本文暫不介紹。行內(nèi) 和 行內(nèi)塊元素
one、tow、three 為行內(nèi)元素, four 為行內(nèi)塊元素
行框: 一個(gè)框框包裹了內(nèi)聯(lián)元素, 行框頂部、底部用黑線表示
基線: 默認(rèn)通過父元素基線對(duì)齊行框的元素, 紫色實(shí)線
字體高度: 父元素字體高度涉及到 text-top、text-bottom 對(duì)齊, 紅色實(shí)線
中線: 位于基線上方, 相對(duì)基線距離為小寫字母 x 的一半
one
two
three
four
理解了這三個(gè)概念, vertical-align 樣式 就是小菜一碟, 不過在這之前還是有幾個(gè)問題要先告訴大家
**如何確定父元素基線**: 左邊第一個(gè)無樣式子元素文本底部, 確定父元素基線 **如何確定父元素字體高度**: 左邊第一個(gè)無樣式子元素高度, 確定父元素字體高度
看到這里大家可能已經(jīng)一頭霧水了, 被各種概念混淆了, 別慌穩(wěn)住。接下來進(jìn)入實(shí)戰(zhàn), 通過例子加強(qiáng)對(duì)概念理解
實(shí)戰(zhàn) top bottom 對(duì)齊top、bottom 是子元素相對(duì)行框頂部和底部的對(duì)齊方式。
那么, 很明顯 one、two、被設(shè)置了 top 對(duì)齊, three 被設(shè)置了 bottom 對(duì)齊
text-top text-bottom 對(duì)齊
text-top、text-bottom 是子元素相對(duì)父元素字體空間頂部和底部對(duì)齊。
結(jié)合概念來判斷, 紅線是父元素字體空間, 那么就很容易判斷, two 是 text-top 對(duì)齊, three 和 four 是 text-bottom 對(duì)齊
middle 對(duì)齊
middle 是子元素相對(duì)于父元素的中線對(duì)齊
那么就很容易判斷, one、 two、three 是 middle 對(duì)齊方式
行框內(nèi)容垂直居中
可能有這種情況, 一個(gè)子元素高度占據(jù)了行框的高度, 示例中 four 就是這種情況。因?yàn)?four 的高度, 設(shè)置 vertical-align 它自身沒有空間移動(dòng), 為了滿足對(duì)齊方式, 基線要發(fā)生移動(dòng)。
上圖實(shí)現(xiàn)了子元素垂直居中, 黑線為中線。對(duì)比上一張圖 (middle 對(duì)齊), 不難發(fā)現(xiàn)基線和中線向上發(fā)生了偏移。其它對(duì)其方式也會(huì)產(chǎn)生基線偏移的效果, 讀者可自行嘗試。
總結(jié)
因?yàn)橛玫牟欢? 其他對(duì)齊方式并沒有舉例。不過只要弄懂了 行框、 基線、中線 這些概念, 其他參數(shù)處理起來也很簡(jiǎn)單。
參考垂直對(duì)齊：vertical-align屬性
【譯】關(guān)于vertical-align你應(yīng)知道的一切
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114920.html
摘要：部分樣式代碼總結(jié)因?yàn)橛玫牟欢嗥渌麑?duì)齊方式并沒有舉例。 起因 內(nèi)容垂直居中在前端布局中, 是經(jīng)常遇到的需求。雖然可以用 浮動(dòng) float、position:absolute、 來解決, 不過文檔流都會(huì)受到影響。筆者常用的是 flex, 用起來順手, 有些地方用起來感覺小題大做, 于是就來探究一下 vertical-align 如何做到居中布局。 初探 要明白 vertical-align...
摘要：通過鍵返回模式。通過小寫鍵刪除光標(biāo)當(dāng)前所在的字符。無論當(dāng)前光標(biāo)在什么位置，通過鍵在當(dāng)前行末尾進(jìn)行字符插入。注能夠記錄變化的次數(shù)隨編輯器的不同而不同，通常也是可以配置的。 showImg(http://segmentfault.com/img/bVckBC); 本文及圖片轉(zhuǎn)載自：http://www.viemu.com/a_vi_vim... Use i to enter inser...
摘要：簡(jiǎn)明教程是一本旨在介紹如何使用語言進(jìn)行編程的自由圖書。它以教材與指南的形式為入門者介紹編程語言。有關(guān)是編程語言全新的一個(gè)版本，主要在性能方面獲得了極大的提升。也同時(shí)做為對(duì)開源社區(qū)的貢獻(xiàn)與致敬。 《簡(jiǎn)明 PHP 教程》是一本旨在介紹如何使用 PHP 語言進(jìn)行編程的自由圖書。它以教材與指南的形式為入門者介紹 PHP 編程語言。如果你對(duì)電腦知識(shí)的了解僅限于如何保存文本文件的話，那這本書就是為...
摘要：課程簡(jiǎn)介簡(jiǎn)明易懂的課程，不僅適用于那些有其它語言基礎(chǔ)的同學(xué)，對(duì)沒有編程經(jīng)驗(yàn)的同學(xué)也非常友好。建議遵守以下約定使用個(gè)空格來縮進(jìn)永遠(yuǎn)不要混用空格和制表符在函數(shù)之間空一行在類之間空兩行字典，列表，元組以及參數(shù)列表中，在后添加一個(gè)空格。 showImg(https://segmentfault.com/img/bVCldE); 課程簡(jiǎn)介：簡(jiǎn)明易懂的 Python3 課程，不僅適用于那些有其它語...
摘要：在線挑戰(zhàn)，還沒用過，貌似現(xiàn)在對(duì)英文資料心里還有種抵觸，必須克服實(shí)驗(yàn)樓研發(fā)工程師包含了等學(xué)習(xí)課程。書的作者就是開發(fā)了用于數(shù)據(jù)分析的著名開源庫的作者英文資料，對(duì)數(shù)據(jù)分析中要用到的一些庫，等等做了簡(jiǎn)要介紹。形式的資料，示例代碼都很全。 showImg(https://segmentfault.com/img/remote/1460000004852849); 一、說明 面對(duì)網(wǎng)絡(luò)上紛繁復(fù)雜的資...
閱讀 2779·2021-10-14 09:42
閱讀 837·2021-10-11 10:57
閱讀 781·2019-08-30 15:54
閱讀 1925·2019-08-30 13:50
閱讀 1693·2019-08-30 11:19
閱讀 940·2019-08-29 12:38
閱讀 1431·2019-08-26 11:51
閱讀 1399·2019-08-26 10:48
