vertical-align 簡明指南

MSchumi 發布于2019-08-02 15:29 / 3463人閱讀

摘要：部分樣式代碼總結因為用的不多其他對齊方式并沒有舉例。

起因

內容垂直居中在前端布局中, 是經常遇到的需求。雖然可以用 浮動 float、position:absolute、來解決, 不過文檔流都會受到影響。
筆者常用的是 flex, 用起來順手, 有些地方用起來感覺小題大做, 于是就來探究一下 vertical-align 如何做到居中布局。

初探

要明白 vertical-align 的布局規則, 有些概念還是要理清一下。

vertical-align 用來對齊行內元素, 因此我們設置元素的 display 屬性為 inline、inline-block or inline-table, inline-table 用的不多, 本文暫不介紹。

行內和行內塊元素

one、tow、three 為行內元素, four 為行內塊元素

行框: 一個框框包裹了內聯元素, 行框頂部、底部用黑線表示
基線: 默認通過父元素基線對齊行框的元素, 紫色實線
字體高度: 父元素字體高度涉及到 text-top、text-bottom 對齊, 紅色實線
中線: 位于基線上方, 相對基線距離為小寫字母 x 的一半



    
        one
        two
        three
        four

理解了這三個概念, vertical-align 樣式就是小菜一碟, 不過在這之前還是有幾個問題要先告訴大家

**如何確定父元素基線**: 左邊第一個無樣式子元素文本底部, 確定父元素基線
**如何確定父元素字體高度**: 左邊第一個無樣式子元素高度, 確定父元素字體高度

看到這里大家可能已經一頭霧水了, 被各種概念混淆了, 別慌穩住。接下來進入實戰, 通過例子加強對概念理解

實戰 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 對齊方式

行框內容垂直居中

可能有這種情況, 一個子元素高度占據了行框的高度, 示例中 four 就是這種情況。因為 four 的高度, 設置 vertical-align 它自身沒有空間移動, 為了滿足對齊方式, 基線要發生移動。

上圖實現了子元素垂直居中, 黑線為中線。對比上一張圖 (middle 對齊), 不難發現基線和中線向上發生了偏移。其它對其方式也會產生基線偏移的效果, 讀者可自行嘗試。

總結

因為用的不多, 其他對齊方式并沒有舉例。不過只要弄懂了行框、基線、中線這些概念, 其他參數處理起來也很簡單。

參考

垂直對齊：vertical-align屬性
【譯】關于vertical-align你應知道的一切

GPU云服務器云服務器簡明示例簡明總結簡明python 簡明python教材

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

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

vertical-align 簡明指南

摘要：部分樣式代碼總結因為用的不多其他對齊方式并沒有舉例。起因內容垂直居中在前端布局中, 是經常遇到的需求。雖然可以用浮動 float、position:absolute、來解決, 不過文檔流都會受到影響。筆者常用的是 flex, 用起來順手, 有些地方用起來感覺小題大做, 于是就來探究一下 vertical-align 如何做到居中布局。初探要明白 vertical-align...

wqj97 2019-08-30 11:19 評論0 收藏0
vi / vim 簡明學習指南

摘要：通過鍵返回模式。通過小寫鍵刪除光標當前所在的字符。無論當前光標在什么位置，通過鍵在當前行末尾進行字符插入。注能夠記錄變化的次數隨編輯器的不同而不同，通常也是可以配置的。 showImg(http://segmentfault.com/img/bVckBC); 本文及圖片轉載自：http://www.viemu.com/a_vi_vim... Use i to enter inser...

warnerwu 2019-06-28 10:06 評論0 收藏0
《簡明 PHP 教程》00 開篇

摘要：簡明教程是一本旨在介紹如何使用語言進行編程的自由圖書。它以教材與指南的形式為入門者介紹編程語言。有關是編程語言全新的一個版本，主要在性能方面獲得了極大的提升。也同時做為對開源社區的貢獻與致敬。《簡明 PHP 教程》是一本旨在介紹如何使用 PHP 語言進行編程的自由圖書。它以教材與指南的形式為入門者介紹 PHP 編程語言。如果你對電腦知識的了解僅限于如何保存文本文件的話，那這本書就是為...

lpjustdoit 2019-07-01 10:37 評論0 收藏0
Python3 簡明教程

摘要：課程簡介簡明易懂的課程，不僅適用于那些有其它語言基礎的同學，對沒有編程經驗的同學也非常友好。建議遵守以下約定使用個空格來縮進永遠不要混用空格和制表符在函數之間空一行在類之間空兩行字典，列表，元組以及參數列表中，在后添加一個空格。 showImg(https://segmentfault.com/img/bVCldE); 課程簡介：簡明易懂的 Python3 課程，不僅適用于那些有其它語...

cyqian 2019-07-25 10:44 評論0 收藏0
Python入門資料大全(更新ing)

摘要：在線挑戰，還沒用過，貌似現在對英文資料心里還有種抵觸，必須克服實驗樓研發工程師包含了等學習課程。書的作者就是開發了用于數據分析的著名開源庫的作者英文資料，對數據分析中要用到的一些庫，等等做了簡要介紹。形式的資料，示例代碼都很全。 showImg(https://segmentfault.com/img/remote/1460000004852849); 一、說明面對網絡上紛繁復雜的資...

wuaiqiu 2019-07-31 10:49 評論0 收藏0