vertical align,HTML-CSS：vertical-align属性

vertical align,HTML-CSS：vertical-align属性详细介绍

本文目录一览： vertical-align是什么

vertical-align是CSS中的一个属性，可以用于设置元素的垂直对齐方式，下面我们就来具体看一下vertical-align属性的用法。
vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
vertical-align属性的值比较多：
baseline：默认。元素放置在父元素的基线上。
sub：垂直对齐文本的下标。
super：垂直对齐文本的上标
top：把元素的顶端与行中最高元素的顶端对齐
text-top：把元素的顶端与父元素字体的顶端对齐
middle：把此元素放置在父元素的中部。
bottom：把元素的顶端与行中最低的元素的顶端对齐。
text-bottom：把元素的底端与父元素字体的底端对齐。
length：
%：使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit：规定应该从父元素继承 vertical-align 属性的值。
比如：vertical-align top就是垂直对齐文本的顶部 。
在表格中，这个属性设置单元格内容的对齐方式.vertical-align应用最多的应该是在td内，控制内部对象位置。

如何理解vertical-align与line-height？

1.背景介绍

随着互联网行业的发展，人们对网页的要求已经不限于传递信息，如何将网页设计的更合理，能更容易的让用户获取信息也愈发重要。而文字作为网页信息的主要载体，

它的样式对用户交互的影响十分巨大，本次小课堂将跟大家分享两个关于文字样式的标签：line-height和vertical-align。

2.知识剖析

1.line-height基本概念

定义：行高是指文本行基线baseline之间的垂直距离

1.1 line-height属性可赋值

<设置固定长度(px,rem等固定单位)

设置数字:设置数字，此数字会与当前的字体尺寸相乘来设置行间距。

设置百分比:基于当前字体尺寸的百分比行距

注意：数字可以直接被继承，然后在计算行高，而百分比是先计算出行高，在以px继承

2.vertical-align基本概念与应用

定义：使行内元素的基线相对于该元素所在行的基线的垂直对齐

默认值baseline:元素基线与父元素基线对齐

众所周知，vertical-align支持很多属性值；(关键字值:vertical-align等等: middle;长度值：vertical-align: 4px等等；百分比值：vertical-align: 10%...等等)

注意：vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。

3.常见问题

为什么在div内插入图片，会发现图片下面有一段空白间隙？

4.解决方案

1,图片默认是inline水平的，而vertical-align对块状水平的元素无感。因此，我们只要让图片display水平为block就可以了，我们可以直接设置display或者浮动、绝对定位等

2,直接修改line-height值

5.编码实战

6.拓展思考

都用什么方法可以实现垂直居中？

1.想要让单行文字垂直居中居中，可以使用刚刚讲到的line-height属性

2.使用刚刚讲到的vertical-align属性实现居中

3.使用盒子模型

4.使用table布局

把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。

5.使用flex弹性布局

设置父元素display:flex，使用align-items:center

6.使用绝对定位

绝对定位后设置top和left为50%，然后纵向变化50%的自身高度

7.参考文献

参考一： MDN

参考二： 深入理解line-height与vertical-align

参考三： 对CSS vertical-align的一些理解与认识（一）

8.更多讨论

为什么我的vertical-align属性不起作用？

我们知道了vertical-align是垂直对齐的意思，不少经验尚浅的同行会试着使用这个属性实现一些垂直方向上的对齐效果，

会发现有时候可以，有时候又不起作用，不知道为什么？因为只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。

ppt
</设置固定长度(px,rem等固定单位)

CSS vertical-align 属性

CSS vertical-align 属性控制在一行上相邻设置的元素如何对齐。
vertical-align — 默认值。顾名思义，它将元素与父元素的基线对齐。
top — 将元素与一行中最高元素的顶部对齐。
bottom — 将元素与底部对齐，元素处于同一级别。
middle — 将元素与其父元素的中心对齐。
text-top — 使用其父元素行中最高字体的顶部对齐元素。
text-bottom — 使用其父元素行中最高字体的底部对齐元素。
sub — 将元素对齐到其父元素的基线下标。它的行为更像 _{标签。
super — 将元素与父元素的基线上标对齐。它的行为更像 ^{标签。
将元素与给定单位对齐。正数将使元素与基线上方对齐，负值将使元素与基线下方对齐。
这些值可以是任意长度单位： px ， em ， % ，等。
initial — 将元素的对齐方式设置为其默认值，即 baseline 。
inherit — 将元素的对齐方式设置为其父元素的值。
vertical-align 属性可以直接应用用于表格单元格，可以将对齐单元格内的内容。重要的一点是，它能很好的兼容浏览器在显示效果上的一致性。
效果如下：
vertical-align 属性不允许您在另一个元素中 “垂直居中” 一个元素。我们更多的会使用 Flexbox 来做垂直居中。
但是，您可能不知道，有一个 ghost 技巧可以帮助您垂直居中一个元素。
效果如下：}}

怎么理解CSS中vertical-align这个属性

vertical-align 属性设置元素的垂直对齐方式。
vertical-align:middle 把元素放置在父元素的中部
vertical-align:bottom 把元素的顶端与行中最低的元素的顶端对齐
vertical-align:top 把元素的顶端与行中最高元素的顶端对齐
vertical-align:inherit 规定应该从父元素继承 vertical-align 属性的值(任何的版本的 internet explorer （包括 ie8）都不支持属性值 "inherit")
还有一些值，如：baseline（默认值），sub，super 等，不太常用。
vertical-align
属性设置元素的垂直对齐方式。它的值比较多：baseline
|
sub
|
super
|
top
|
text-top
|
middle
|
bottom
|
text-bottom
|
inherit。
baseline：将支持valign特性的对象的内容与基线对齐
sub：垂直对齐文本的下标
super：垂直对齐文本的上标
top：将支持valign特性的对象的内容与对象顶端对齐
text-top：将支持valign特性的对象的文本与对象顶端对齐
middle：将支持valign特性的对象的内容与对象中部对齐
bottom：将支持valign特性的对象的文本与对象底端对齐
text-bottom：将支持valign特性的对象的文本与对象底端对齐
inherit：规定应该从父元素继承
vertical-align
属性的值(任何版本的ie（包括
ie8）都不支持属性值
"inherit")
注：常用的有top、middle、bottom，其他的不是很常用。一般是用做img的对其。
在CSS中的vertical-align
属性是设置元素垂直对齐的方式
需要注意的是：
vertical-align属性定义行内元素的基线是相对vertical-align这个元素所在行的基线的垂直对齐。
是会允许指定负长度值和百分比值的。
这样是会导致vertical-align元素降低，并非是升高的。
在单元表格中，vertical-align属性是能设置单元格框中的
单元格内容的对齐方式的
vertical-align属性的浏览器支持情况如下：
目前所有的浏览器都是支持vertical-align的属性的
但是需要注意的是：无论是任何的版本的
Internet
Explorer，包括
IE8在内，都是不支持 "inherit"这个属性值的。
vertical-align属性的实例介绍如下：
垂直对齐一幅图像的实力介绍：
img { vertical-align:text-top; }

HTML-CSS：vertical-align属性

vertical-align是什么？
设置元素的垂直对齐方式。

注意点：
text-align是设置给需要对齐元素的父元素，
vertical-align是设置给需要对齐的那个元素本身，
vertical-align只对行内元素有效。

/*默认情况下图片和一行文字的基线对齐，
基线就是一行文字中最短那个文字的底部*/
vertrical-align:baseline;

/*图片和父元素的顶部对齐*/
vertrical-align:top;

/*图片和父元素的底部对齐*/
vertrical-align:bottom;

/*图片和一行文字的顶部对齐*/

vertrical-align:text-top;

/*图片和一行文字的底部对齐*/

vertrical-align:text-bottom;

CSS的垂直对齐是什么意思？

H4 { vertical-align: top }
上面代码的意思是说
全网页的h4标签都是垂直对齐上面。
其中vertical-align的意思是垂直对齐的意思，
其中vertical这个英文词的意思是垂直的意思，
读音“维特口”。
其align的英文词的意思对齐的意思。
读音“阿蓝”。
至于vertical-align后面的top就是“上面”的意思。
-
这个vertical-align可以组合成如下代码
vertical-align:bottom;
vertical-align:middle;
vertical-align:sub;
vertical-align:super;
-
举个例子。
vertical-align比如是在渔缸的的一条鱼。
这条鱼只能向上游和向下游。
vertical-align:top就是这条鱼向水面游了。
vertical-align:bottom就是向水地游了。
-
至于vertical-align:sub这个一般是
化学元素用的，比如氧气的化学元素是O2
这个字母O后面是数字2是小写的，在O字母的右下脚，
很小的一个字母。网页显示出来是个小小的数字。
vertical-align:super的意思是平方和次方什么的，
比如“10的2次”方可以写成10 2
这个数字10后面的2是很小的一个数字，
我这里打不出来，因为不让用HTML代码。
这个数字2是在10的右上角的很小的一个2。
初中数学里都学过。
使用 margin 属性来水平对齐
可通过将左和右外边距设置为 "auto"，来对齐块元素。
注释：除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。
垂直对齐就是相对于外部容器垂直方向的对齐方式，如下三种方式：
1、垂直居中对齐：
css：vertical-align:middle;
示例：
2、垂直底部对齐：
css：vertical-align:bottom;
示例：
3、垂直顶部对齐：
css：vertical-align:top;
示例：

怎么理解CSS中vertical-align这个属性

vertical-align 属性设置元素的垂直对齐方式。vertical-align:middle 把元素放置在父元素的中部vertical-align:bottom 把元素的顶端与行中最低的元素的顶端对齐vertical-align:top 把元素的顶端与行中最高元素的顶端对齐vertical-align:inherit 规定应该从父元素继承 vertical-align 属性的值(任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit")还有一些值，如：baseline（默认值），sub，super 等，不太常用。
vertical-align 属性设置元素的垂直对齐方式。它的值比较多：baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit。
baseline：将支持valign特性的对象的内容与基线对齐
sub：垂直对齐文本的下标
super：垂直对齐文本的上标
top：将支持valign特性的对象的内容与对象顶端对齐
text-top：将支持valign特性的对象的文本与对象顶端对齐
middle：将支持valign特性的对象的内容与对象中部对齐
bottom：将支持valign特性的对象的文本与对象底端对齐
text-bottom：将支持valign特性的对象的文本与对象底端对齐
inherit：规定应该从父元素继承 vertical-align 属性的值(任何版本的IE（包括 IE8）都不支持属性值 "inherit")
注：常用的有top、middle、bottom，其他的不是很常用。一般是用做img的对其。

你所不知道的vertical-align

有些东西我们经常用，但是我们却并不了解它的原理，所以一旦换了场景，好多东西就不知道该怎么用了。最近一直很纠结 vertical-align 到底是怎么回事，因为不管是垂直对齐元素，还是消除inline-block的缝隙也好，我们总能用到它，可是就是不知道为什么。抱着刨根问底的态度，今天在网上发现了一篇好文章，无奈是英文，博主不是什么英语大神，看到英语也头疼，但奈何好文章都是英文。那就来吧，翻译一下午，虽然是撕心裂肺，但是感觉受益匪浅，文中有翻译不当的地方还请各位看官多多指正。
小二，上原文链接： Vertical-Align: All You Need To Know
我们经常需要在竖直方向上对齐一些并肩排列的元素。 CSS为我们提供了一些实现方法。有时候我会使用 float ，有时候也用 position:absolute ，有时候甚至利用手动添加内外边距的方法。 我并不喜欢这些方法。浮动只能对齐它们的顶部，而且需要手动清除浮动。绝对定位会使元素脱离文档流，以致于它们就不能影响周围的元素了。再说说使用固定的内外边距，会突然导致微弱的改变。 这里还有另一种值得信任的方法，那就是 vertical-align 。从专业角度讲，使用 vertical-align 来进行布局是一种“黑科技”，因为发明它并不是出于这个目的。 vertical-align 是为了对齐文本和紧邻文本的元素。尽管如此，你也能在不同场景下使用 vertical-align 去进行灵活细微的元素对齐工作，而且你并不需要知道元素的具体尺寸。
但是， vertical-align 有时候真的让人抓狂。它似乎有一些不可告人的秘密。例如，有时候你对一些元素设置 vertical-align ，你会发现它的对齐方式并没有改变，但是同一行的其它元素却变了。我时常哭晕在 vertical-align 的厕所中。 不幸的是，大部分关于它的资料都是浅显的。尤其是，如果你想找 vertical-align 关于布局方面的介绍时，他们大多告诉你错误的信息—— vertical-align 可以控制元素内部所有元素的竖直排列。他们总是给出最基础的场景应用，却从不介绍复杂的情况。 所以我给自己立下任务， 要一次弄清所有关于vertical-align的知识。 我看完 W3C的CSS说明 然后自己动手做了一些实验。结果就是这篇文章了。 那么，然我们一起来了解游戏规则吧。
vertical-align 用于对齐 行内级元素 。行内级元素的 display 属性是如下值中的一种：
inline元素 是包裹文本的基本标签。 inline-block元素 顾名思义是存在于inline中的block元素。它们可以设置宽高、内外边距、和边框。
inline级元素是一个挨着一个排在一行的元素。一旦一行放不下所有元素的时候，就会在下面创建一个新行。所有的行都有一个叫做 line-box 的东西，它是用来包裹这一行所有内容用的。line-box的高度是根据一行内所有内容的高度定的。如下图中所示：line-box的上下边沿用红线标出。（line-box的边沿平时是看不到的，画出来是为了方便读者理解）

理解垂直对齐最关键的一点在于理解相关元素的基线。还有一些场景中，元素的上下边沿也至关重要。现在就让我们看一下不同元素的基线和上下边沿到底在哪里？

行内元素的基线 是字符下面的一条线。具体是图中的蓝线。大约的说，基线是字体正中线下面的一条线。想具体了解的请看 W3C的详细说明

 我为line-box中的text-box（下面会讲到）加上了上下边沿（绿线）以及基线（蓝线）。我也为文字元素加上了背景色（灰色）。 line-box有一个上边沿，它和行内最高的元素的上边沿对齐；同样也有一个下边沿和行内最低元素的下边沿对齐。这两个边沿也就是图中的红线。
line-box的基线是会变化的 ：
这可能是最令人困惑的部分。这就意味着，line-box的基线是会根据一定的规则动态改变的。 由于line-box的基线是不可见的，所以你也不可能准确的说出它到底在哪里。但是能通过一个简单方法知道它在哪。只要在一行内容的行首添加一个字符就行，例如：我加了一个"x"（行首灰色的那个）。如果这个字符没有进行任何人为方式的对齐，那么它的基线就默认是在line-box的基线上。 line-box的基线周围的空间，我们可以称之为 text box 。你可以把text box看做是一个在line-box中没有进行任何对齐的inline元素。它的高度等于父元素的字体大小。因此text box是用于包裹line box中没有设置任何对齐的文字的。图中绿线之间的部分就是text box。由于text box是和基线紧密相连的，因此它会随着基线的移动而移动。（在W3C说明中，text box叫做strut） 现在我们知道了所有的预备知识点，让我们做一下总结：
我们通过使用 vertical-align 可以把上面我们介绍的那些参考点（基线，上线边沿等）设置成确定的关系。 主要分一下两种情况：
以下的两种情况，其实也是相对于line-box的基线的一种对齐，因为text-box的上下边沿也是取决于基线的。
我们现在能够在具体的场景下更细致的研究vertical-align了。尤其是，我们将解决一些常见的问题。
长久以来一直困扰我的一个问题：我想让一个图标和它旁边的文字居中对齐时，仅仅对图标使用 vertical-align:middle 似乎并没有真正的使两者居中对齐。 来看看下面这个例子：

下图还是这个例子，不过我为其添加了一些标注帮助理解，这些线都是我们之前已经讲过的：

使用vertial-align是的一大缺陷就是：line-box的基线的位置受其内部所有元素的影响。我们假设这样一种情况，一个元素相对于line-box的基线对齐，那么当line-box的基线位置发生改变时，那么元素的位置也会跟着改变。
来看一些例子：
当我们为这个比较高的元素设置其它的 vertical-align 值时，也会有相同的表现。
看看下面的例子。通常都会有如下情况出现，当你想对齐竖直对齐li元素的时候。
正如你所看到的，li元素其实默认是和基线对齐的，基线下面是留有一部分空白的，这个空白是可以容纳半个“x”的空间。这就导致了空隙的存在。如何解决？我们可以改变基线的位置，例如给li元素设置对齐方式为 vertical-align: middle
这种情况不会发生在包含文本内容的inline-block元素身上，因为 文本内容已经把基线的位置抬高了 。
这个问题主要还是inline级元素自身问题造成的。但是鉴于这种情况也影响了竖直对齐，我们还是了解一下比较好。
和上个例子一样，这个例子也是由空隙造成的。这个空隙主要来自于inline元素之间的空格符。inline元素之间的所有空格符会合并为一个空格。如果你想让两个inline元素并排显示，并且 width:50% ，那么这个空格就是个绊脚石。一行的空间不足以容纳两个 width:50% 和一个空格。所以右边的元素就被挤下去了。要想消除缝隙，你就得消除空格。

就是这样。一旦你知道了规则之后它看起来就不那么复杂了。如果下次 vertical-align 再不听话了，就问如下的两个问题：
我相信问题马上就会得到解答。
至此结束，不知道有几个人能耐心的看完……

line-height 与 vertical-align

line-height “ 行高 ”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。行内元素也设置;line-height是可以继承的通过计算继承的。把line-height设置为您需要的box的大小可以实现单行文字的垂直居中(不过必须要有内容，不然line-height不生效) 行内框 ，每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距【（行高-字体size）/2】分别增加/减少到内容区域的上下两边（深蓝色区域） 行框（line box） ，行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。 一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。这是div行高而不是height。 所以行高可以通过line-height直接设置，也可以通过内部最大的行框高度决定

这里能显示高度是因为 div里有内容 如果是个

设置line-height是没有效果的

看line-height:150px 所以居中是相对于150px居中的，line-height是可以设置，如果不设置，就是默认文字的高度，或者图片的高度。 而且啊 在不是h5的声明下div里必须加内容文字啊之类的，不然line-height不起作用。在h5的声明下 有幽灵空白现象 想当于有有内容 所以只需vertical-align: middle;就可以,其实这个并不是完全居中其垂直中心是字符content area的中心，而对于字符x而言，都是比绝对中心位置要下沉的（不同字体下沉幅度不一样），换句更易懂的描述就是x的中心位置都是在字符内容区域高度中心点的下方，而这上下的偏差就是这里图片上下间距的偏差。

给p设置个line-height为100px span的line-height继承为100px 父子元素都有line-height属性会有问题，应该父为height 子为line-height。 其中使用伪类垂直居中直接这样子就可以

vertical-align可以用在display:table-cell;元素的下面（典型的就是td） vertical-alig

display：inline-block，是基于baseline对齐的 一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。

会发现，明明尺寸、display水平都是一样的，结果呢，两个却不在一个水平线上对齐，为什么呢？哈哈，上面的规范已经说明了一切。第一个框框里面没有内联元素，因此，基线就是容器的margin下边缘，也就是下边框下面的位置；而第二个框框里面有字符，纯正的内联元素，因此，第二个框框就是这些字符的基线，也就是字母x的下边缘了。因为行框内的行内框是基线对准的，如上文介绍行高与行内块一样。于是，我们就看到了框框1下边缘和框框2里面字符x底边对齐的好戏。
line-height与vertical-align：简单的属性不简单

先思考个问题：默认的div元素高度为0，为什么添加了文字之后，高度就有了？这个高度是由哪个属性决定的？如果是span元素，高度又是又谁决定的呢？
如上图所示，结果应该很明确了：影响div元素高度的是line-height属性，影响span元素高度的是font-size属性，更准确的说法应该是line-height决定块状元素的内容区域高度，而font-size影响行内元素的文本区域高度，这里请记住 内容区域与文本区域不是同一个概念 。
我们这里的x就是26个英文字母中的x。由于自身形态的一些特殊性，这个小小的不起眼的字母在CSS中是一个很重要的概念。 如基线base-line的定义就是：
字母x 的下边缘（线）就是我们的基线。
vertical-align中的middle指的就是：
关于基线向上1/2的x高度对齐
而x的高度甚至作为一个尺寸单位，这个单位就是ex，就是指小写字母x的高度。
张鑫旭在《CSS世界》中一书中，将veritcal-align属性值分为4类：
这种划分方法是根据属性值的类型来划分的，实际使用中感觉这样的划分方法不够合理，如线类中的baseline、middle是受到元素font-size影响，而top、bottom却是受到元素line-height影响；也就是说baseline、middle是子元素文本区域与父元素文本区域对齐，top、bottom是子元素内容区域与父元素内容区域对齐，不同的veritcal-align属性值，影响其对齐效果的属性都是不同的。
上图显示的是改变子元素line-height（内容区域）对对齐的影响，此外根据veritcal-align属性值不同，子元素的内容区域、文本区域，父元素的内容区域、文本区域都会对对齐造成影响，设置百分比或相对尺寸更是会与font-size与line-height两个属性产生直接联系，可见简单的vertical-align想要合理使用并不是那么简单的。
理解和正确使用line-height与vertical-align，首先要明确内容区域与文本区域的概念：
在一般情况下，可以认为font-size影响span，span内容大小即为文本区域，line-height影响div，div的内容大小即为内容区域。这里要注意影响并不是简单的font-size或line-height数值就决定区域的高度。
如上图div元素的实际高度是43而不是40，这是因为div中的文本存在一个为ling-height值40px的内容区域，而span也存在一个ling-height值40px的内容区域，这两个内容区域高度相等，但是vertical-align默认值为baseline，所以两者之间是关于文本区域对齐的，文本区域两者大小是不同的，即baselin所在位置不同，连接两个高度相同矩形，接口不在同一个位置，自然两者就无法对齐，父元素要包含这两个元素，高度也就不可能只有40px。div包含图片，底部出现空白也是因为这个原因了，图片的底部就是baseline，div中存在幽灵节点，两者基于baseline对齐造成了底部空白。