CSS属性vertical-align详解

作用对象

vertical-align的意思是在垂直方向进行对齐。它主要对以下属性的元素有效 inline元素、inline-block元素和普通的文本。

行盒：line-box

定义：
（盒的排布方式，不是行盒）在一个内联格式化上下文中，盒是一个接一个水平放置的，从包含块的顶部开始。这些盒之间的水平margin，border和padding都有效。
（盒的对齐方式，不是行盒）盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐。
（什么是行盒）包含来自同一行的盒的矩形区域叫做行盒。

vertical-aligh默认值baseline

baseline：把盒的基线与父级盒的基线对齐。如果该盒没有基线，就把bottom margin边和父级的基线对齐。（为默认值）这里我们需要知道什么是baseline，baseline在不同的盒子里有什么样的表现。

简单来说，baseline是小写字母x下面的一条线。

具体来说

在文本之类内联元素中，基线是字符x的下边缘位置（中文的底部并不是基线）。
在inline-block元素中，也分两种情况
- 如果该元素中有内联元素，基线就是最后一行内联元素的基线
- 如果该元素内没有内联元素或者overflow不是visible，其基线就是margin的地边缘
img标签的display设置为inline还是inline-block，其基线都为margin-box的下边缘。

参数

值	描述
baseline	默认。元素放置在父元素的基线上。
middle	把此元素放置在父元素的中部。
top	把元素的顶端与行中最高元素的顶端对齐。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-top	把元素的顶端与父元素字体的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标。
%	使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

baseline 就是当前元素基线与父元素的基线对齐
父元素的基线就是指行盒的基线。其基线是相对固定不变的，可以在行盒里写一个字母X，行盒的基线就是字母X的底部。它的基线是永远相对于这个x不变的。

<div class="block"><span>x子元素A</span>xHgf
</div>
<style>
.block {height: 200px;width: 500px;border: 1px solid #ddd;font-size: 50px;
}
span {background-color: #ddd;
}
</style>

分析：
父元素.block的base-line是xHgf的baseline。

middle
当前元素的垂直中心点与行盒基线往上 1/2 x-height 处对齐（简单说就是X字母的中心位置对齐）。

<div class="block"><span>x子元素A</span>xHgf
</div>
<style>
.block {height: 200px;width: 500px;border: 1px solid #ddd;font-size: 50px;
}
span {background-color: #ddd;vertical-algin: middle;
}
</style>

top: 当前元素的顶边和行内最高元素的顶边对齐。

<div class="block"><span class="child"></span><span class="top">x子元素A</span>xHgf
</div>
<style>.child {display: inline-block;width: 40px;height: 80px;margin-top: 20px;background-color: #ff0000;}.block {height: 200px;width: 500px;border: 1px solid #ddd;font-size: 50px;}.top {vertical-align: top;background-color: #ddd;}
</style>

图中子元素A设置成top,它的与当前行盒里最高元素的顶端相对齐，顶端是包括margin值的。

bottom: 当元素的底端与行中最低的元素的底端对齐。（网上写顶端，意思有待研究）

text-top 把元素的顶端与父元素字体的顶端对齐。（字体很重要，它对齐的是与父元素字体一样的顶端）

<div class="block"><span class="child"></span><span class="c2">x子元素A</span><span class="c3">x子元素3</span><span class="c4">x子素4</span>
</div>
<style>.block {border: 1px solid #ddd;font-size: 50px;}.child {display: inline-block;width: 40px;height: 80px;margin-top: 20px;background-color: #ff0000;}.c2 {background-color: #ddd;vertical-align: text-top;font-size:30px;}.c3 {font-size:50px;}.c4 {font-size:80px;background-color: #ff0000;}
</style>

图中父元素字体是 50px；而与之相同的子元素3的字体50px, 所以可以看成是与子元素3的顶部对齐。
vertical-align:text-bottom 同理，与底部对齐。
其他属性比较不重要就不再阐述了。

参考

web前端vertical-align的作用及对象详解

css属性之vertical-align详解

CSS属性vertical-align详解（CSS之五）相关推荐

html css 距离顶部距离,详解CSS line-height和height
最近在做CSS界面时经常遇到line-height和height这两个属性,一直没搞很明白,今天静下心来好好网上查阅了一下,算是有所领悟.https://blog.csdn.net/a20131263 ...
css字体像素教程,详解CSS中的字体属性的使用
字体族 font-family 示例: CSS Code复制内容到剪贴板 h2 {font-family:times,serif;} 注意:如果一个字体名多于一个单词(有空格),应该加上引号. 例如: ...
css overflow 省略号,图文详解CSS文本溢出显示省略号效果（text-overflow）
在工作中经常会遇到文本溢出,需要显示省略号的情况,那这个省略号是怎么实现的呢?这篇文章就给大家讲讲CSS中如何用text-overflow实现超出部分显示省略号.对CSS文字溢出加省略号这个知识不熟悉 ...
html nthchild作用,详解CSS中:nth-child的用法
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nt ...
CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...
css中float详解,CSS浮动属性Float详解？史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...
CSS clear 属性取值详解
之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作 ...
详解CSS float属性
转自:http://luopq.com/2015/11/08/CSS-float/ \详解CSS float属性 Posted on 2015-11-08 | In CSS | 5条评 ...

CSS属性vertical-align详解（CSS之五）