vertical-align 简明指南

MSchumi 发布于2019-08-02 15:29 / 3434人阅读

摘要：部分样式代码总结因为用的不多其他对齐方式并没有举例。

起因

内容垂直居中在前端布局中, 是经常遇到的需求。虽然可以用 浮动 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教材

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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