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