vertical(vertical-align)学会了吗

在学习CSS期间，不少同学感觉基本能理解line-height和vertical-align的用法，但是遇到一些具体问题的时候，又发现搞不太明白

 

在学习CSS期间，不少同学感觉基本能理解line-height和vertical-align的用法，但是遇到一些具体问题的时候，又发现搞不太明白了，这主要是对一些相关概念理解得还不够透彻，今天我们就通过

本文一步步帮大家彻底搞懂这2个概念一、相关概念要理解line-height和vertical-align这2个概念，我们同时也要掌握一些相关的概念，下面我们就给大家一一介绍1.1 内联盒子块状元素的每一行，就是由内联盒子组成的，内联盒子分为。

具名内联盒子和匿名内联盒子* 如果被行内元素包裹，属于具名内联盒子* 如果只是光秃秃的文字没有被行内元素包裹，属于匿名内联盒子我们来具体举个例子：div {width: 400px;font-size: 30px;。

background-color: gold;}span {background-color: yellowgreen;}

页面展示效果如下：

黄色背景是一个p标签，它的一行包含了：①光秃秃的文字“今天的”；②一个行内元素“月亮”；③光秃秃的文字“好美啊！”其中①和③就属于匿名内联盒子，②属于具名内联盒子这里我们再对比一下2种内联盒子的高度：。

上例中，我们知道div的高度height是由匿名内联盒子和具名内联盒子的高度撑起的行高决定的，显示为40px：

现在我们在浏览器端把span标签的文字大小改成0，那么此时div完全是由具名内联盒子撑起的行高，我们看到div高度同样是40px。

因此我们可以得出结论，不论是具名内联盒子还是匿名内联盒子，它们的空间高度是由字体大小决定的，两者没有区别所以当我们需要查看内联盒子效果时，可以用span标签来表示，因为其可以设置背景色会更直观1.2 行框盒子。

块级元素的每一行就是一个行框盒子，每个行框盒子又是由一个一个内联盒子组成的。行框上边界要包裹住所有内联盒子的上边界，行框的下边界要包裹住所有内联盒子的下边界。

在浏览器中，我们用光标选中一行的效果，即下图里的整个蓝色区域就是一个行框盒子的区域（注意：此种情况只适用于自然撑开的高度，设置行高拉开的距离，蓝色区域会大于行款盒子高度）。

1.3 基线基线是内联盒子中小写字母的x的下边缘的一条线，为了垂直方向对齐用的。默认情况下，行框盒子内的所有元素都是相对父元素在垂直方向上基线对齐。举例如下：

上面三个”xx“，其中第一个①是直接写在父元素div标签里的，②③是分别写在2个span标签里，默认情况下span标签里的内容在垂直方向上会与①里的x的底边对齐这里要注意，即使标签里写的不是小x，也有小x这样的一个空间对齐概念存在。

为了帮助大家更好理解，上例中，我们把div里写的“xx”去掉了，显示效果如下：

我们可以看到，两个span标签垂直方向的位置依然没有变化1.4 幽灵节点在HTML5文档声明中，内联元素的所有解析和渲染就像每行行框盒子前面有一个空白节点，这个节点是透明的，没有任何宽度，也没有办法用脚本获得（幽灵节点）。

但是它只在使用html5文档声明的时候才存在我们写下如下代码：body {margin: 0;background-color: gold;}#box {width: 1200px;

padding: 0 50px;margin-top: 20px;font-size: 100px;background-color: black;}span {background-color: yellowgreen;

}img{width: 100px;}

页面的展示效果如下，我们看到图片底边和span标签的文字x底边存在对齐现象，因此，拉高了行高，图片底边和div底边没有重合。

现在我们在浏览器端设置span标签的字体大小为0，效果如下：

我们看到，div依然和上面显示span标签时撑开了相同的高度，这是由于div自己的字体大小是100px，不论其中是不是直接写了文字，div里的图片也会有基线对齐的情况，不过图片是以其底边和父元素里的x底边对齐。

只有当我们把div的字体设置为0时，才能解决这个问题：

二、line-height和vertical-align2.1 line-height上面我们学习了行框盒子，line-height就是来设置每行之间的距离首先大家要明确，因为行框盒子是存在于块状元素当中，所以这个行高属性line-height也是给块元素设置的。

注意：line-height具有继承性，其后代的块状元素都会继承该属性格式：line-height:valuevalue取值：（1）normal，默认值不设置此属性的时，是通过浏览器自动去计算（2）length，长度。

使用指定长度作为行高值单位px，em等（3）number，数值此时表示设置为当前字体大小的number倍的值大多数情况下，这是设置line-height的推荐方法，不会在继承时产生不确定的结果（4）%，百分比。

该值是相对于当前字体尺寸的百分比来设置间距（5）inherit从父元素继承line-height属性的值我们知道line-height本身就具有继承性，为何还有有这个继承的属性值呢？这个属性值是针对如input标签这种有自己样式的标签使用的，如input标签的line-height值默认是normal，不会从父元素继承，而希望该值和父元素的行高一致就需要设置为该属性值。

举例如下：这是没有设置该属性时的默认效果：

这是line-heigh设置为inherit的效果：

应用举例：（1）在没有设置块状元素高度的时候，其高度是由line-height决定的①line-height值不为0时，代码如下：#box1 {width: 200px;line-height: 50px;。

background-color: gold;border: 1px solid black;}

此时的div高度为50px，如下图：

②line-height值为0时，代码如下：#box1 {width: 200px;line-height: 0;background-color: gold;border: 1px solid black;

}

此时div高度为0，如下图：

（2）line-height可以让内联元素近似居中（适用于当line-heigh大于内联元素自身高度的情况）我们来看以下代码：body {background-color: gold;}#box {

width: 1200px;padding: 0 50px;font-size: 80px;line-height: 150px;background-color: black;}span {background-color: yellowgreen;

}

显示效果如下：

我们可以看到①②的高度是一致的，所以此时span标签位置在div中是正好居中的，但是由于CSS字体在设计的时候不会正好占据内联盒子内容区的1/2处，一般来说会有一些下沉，所以文字显示效果是近似居中的2.2 vertical-align

上面讲到的幽灵节点，我们知道了一个默认基线对齐的现象，那我们要如何消除幽灵节点的影响呢，设置vertical-align属性，来调整内联盒子在一行中垂直怎么对齐，就是一个解决方案注意，这个属性是设置给需要修改对齐方式的行内/行内块元素的。

格式：vertical-align:valuevalue取值：* baseline（基线），默认值基线是内联盒子中小写字母的x的下边缘的一条线与和父元素的x下边缘线对齐* middle，元素的垂直中心点和父元素的x的1/2处对齐。

* bottom，内联盒子的底部和行框的底部对齐* top，内联盒子的顶部和行框的顶部对齐说明：（1）设置为baseline或middle时，都是与父元素里的子文本节点x位置有关，即使没有写x也存在这样一个空间概念，可以理解为以下书写：。

（2）设置为top或bottom时，只与行框盒子的上下边界有关，与父元素中的x不再有关举例如下：body {background-color: gold;}#box {width: 1200px;。

padding: 0 50px;font-size: 100px;color: white;background-color: black;}span {vertical-align: bottom;color: black;

font-size: 50px;background-color: yellowgreen;}

显示效果如下：

我们已知行框盒子上、下边界要包裹住所有内联盒子的上、下边界，此时白色字体的匿名内联盒子高度撑起行框盒子的上下最大高度，设置span标签以bottom垂直对齐，其底边就与行框盒子的底边在一条线上2.3 line-height和vertical-align的具体应用。

（1）设置图片垂直居中div {width: 500px;height: 500px;border: 1px solid black;。

text-align: center;/* 1.设置line-heihgt=height */line-height: 500px;}img {/* 2.设置图片居中 */vertical-align: middle;

}

显示效果如下：

如果单独设置line-height和height高度一致并不能使图片垂直居中，因为图片底边会和父元素里的x底边对齐，所以要要实现图片垂直居中，这2个属性需要配合使用（2）设置多行文本垂直居中。

div {width: 300px;height: 300px;/* 1.设置line-height=height */line-height: 300px;border: 1px solid black;

}span {/* 2. 去设置span让span变成行内块状元素，这样就能将span当成一个整体来对待 */display: inline-block;border: 1px solid green;

/* 3.line-height具有继承性需要将其继承下来的line-height去掉 */line-height: normal;/* 4.让span和父元素的x的1/2处对齐 */vertical-align: middle;

}

显示效果如下：

上面我们有举例说明单独设置line-height可以实现单行的文本垂直居中，但是这种多行文本的垂直居中，我们就需要配合vertical-align: middle来实现垂直居中效果总结在具体的运用中，要实现单行文本的垂直居中，设置line-heihgt与height的值相同就可以实现。

但如果要实现图片或多行文本的垂直居中，我们就需要将line-height与vertical-align一起共同使用才能实现居中效果

免责声明：本站所有信息均搜集自互联网，并不代表本站观点，本站不对其真实合法性负责。如有信息侵犯了您的权益，请告知，本站将立刻处理。联系QQ：1640731186