vertical-align是什么

1. 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内，控制内部对象位置。

2. 关于Vertical-Align

 vertical-align用于对齐行内元素。所谓行内元素，即display属性值为下列之一的元素：   inline   inline-block   inline-table   而行 内块元素（inline-block element） __，顾名思义，就是位于行内的块元素。可以有宽度和高度（可以由其内容决定），也可以有内边距、边框和外边距。
   垂直对齐最重要的参考点，就是相关元素基线。某些情况下，行盒子的上下外边界也会成为参考点。下面我们就来看一看相关元素类型的基线和外边界。
                                           这里有三行文本紧挨着。红线表示行高的顶边和底边，绿线表示字体高度，蓝线表示基线。左边这一行，行高与字体高度相同，因此上下方的红色和绿线重叠在了一起。中间一行，行高是font-size的两倍。右边一行，行高为font-size的一半。   行内元素的外边界与自己行高的上、下边对齐。行高比font-size小不小并不重要。因此上图中红线同时也就表示外边界。   行内元素的基线是字符恰好位于其上的那条线，也就是图中的蓝线。大致来说，基线总是穿过字体高度一半以下的某一点。可以参考W3C规范中详细的定义。

3. vertical-align的示例

vertical-align:super; 

4. vertical-align的基本属性

vertical-align vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom |inherit默认值：baseline 浏览器支持所有浏览器都支持 vertical-align 属性。注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 inherit。 baseline：将支持valign特性的对象的内容与基线对齐sub：垂直对齐文本的下标super：垂直对齐文本的上标top：将支持valign特性的对象的内容与对象顶端对齐text-top：将支持valign特性的对象的文本与对象顶端对齐middle：将支持valign特性的对象的内容与对象中部对齐bottom：将支持valign特性的对象的文本与对象底端对齐text-bottom：将支持valign特性的对象的文本与对象底端对齐：用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。：用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。（CSS2） 设置或检索对象内容的垂直对其方式。对应的脚本特性为verticalAlign。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。  默认值：baseline继承性：no版本：CSS1JavaScript 语法：object.style.verticalAlign=bottom

5. 深入理解vertical-align

1 .vertical-align是line-height的好基友，凡是line-height起作用的地方，vertical-align基本都起作用
   2 .可以精确控制内联元素的垂直对齐位置
                                          
 1 .文本之类的的内联元素，比如字符x的下边缘，如果是替换元素就是替换元素的下边缘，比如图片的下边缘
   2 .inline-block元素
  
 3 .实践：小图标和后面文字对齐:不受font-size大小影响.但是现在图表应该都是svg吧。精灵图这种感觉资源还是有点大
  
 1 .默认值是baseline,也就是基线对齐，基线就是x的下方，所以可以看到，字母两个字下方是有被裁掉的。
   2 .内联元素沿着字母x的下边缘对齐的。对于图片等替换元素，使用元素下边缘作为基线，因此是下方的排列
   3 .由于相对字母的下边缘对齐，而中文和部分英文字形的下边缘要低于字母x的下边缘，因此，会给人感觉是明显偏下的，一般都会进行调整vertial-align:10px;文字就会在当前基线位置上偏移10px;
  
 1 .baseline
   2 .top/bottom
  
 3 .middle:这个其实并不是绝对居中的。
                                          
 4 .bottom
   5 .这些值对齐的位置是固定的，不是我们最后想要的精确对齐效果
   6 .text-top/text-bottom:盒子顶部和父级内容区域的顶部、底部对齐
                                          
 1 .正数向上偏移，负数往下偏移。数值大小是相对于基线的
   2 .baseline=0
   3 .数值类可以之前绝对精确的垂直定位
  
 1 .相对于line-height计算
   2 .如果一个元素的line-height是20px;那么vertical-align:-25%相当于设置vertical-align:-5px;
  
 1 .只能用于内联元素，或者display:table-cell的属性
   2 .只能作用在display值为inline,inline-block,inline-table,inline-flex元素上
   3 .因此span,strong,em，等内联元素img，button,input等替换元素
   4 .不生效的情况:一些css属性会默认改变display的计算值，导致vertical-align不生效
  
 5 .幽灵节点太小，垂直居中无效
                                          
 1 .vertical-align的百分比值是根据line-height算的
   2 .
  
 1 .按照道理来说，此时div的高度应该是line-height的高度，实际确是比这个大
   2 .内外文字的font-size不一样，而span标签前面是有一个看不见的幽灵空白节点的，这里我们用x来代替
   3 .他原本说的是基线的位置和font-size大小有关系，字体越大，极限的位置越在下面，文字默认都是基线对齐，如果两个字号不一样的文字放在一起的时候，就会发生上下位移，如果位移位置足够大，就会超过行高的限制，出现意外的高度。
   4 .但是chrome里面没有发现基线和font-size的大小有关系，感觉还是沿着x下边一起的
                                          
 5 .但是解决的办法是通用的，那就是两个文字大小一样就可以了,或者文字顶部对齐就可以vertical-align:top
                                          
 1 .任何一个块级元素，里面有图片，则块级元素高度基本上都要比图片的高度高
                                          
 2 .间隙产生的三大元凶
                                          
 4 .解决方法
  
 1 .对于内联元素，如果遇到了不太理解的现象，一定要想到有个看不见的幽灵空白节点和vertical-align熟悉感
  
 1 .无论浏览器尺寸多大，无论弹框尺寸，我们的弹框永远是居中的。
  
 2 .flex实现的:感觉这样更好理解

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

在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; }

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

在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; }

8. css 中vertical-align属性的困惑

一般情况vertical-align用的地方不多是因为其兼容性不好。
在及其特殊的情况下才会用到它，在需要汉字和图片对齐的地方我从来不用它。
在父元素高度一定的情况下用height和line-height可以实现垂直对齐。
垂直居中还和字体有一定的影响，字体不一样可能看着就不太绝对居中。
vertica-align不是所有标签内都有效。在td内用向你说的有中英文差异的话不如在外边再加个div使div居中里面的自然也就居中了。
需要图文都居中的地方建议使用height和line-height同值的方法。