整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
技术等级】初级
【承接文章】《CSS段落行高，竟然能够实现垂直居中功能，神奇的CSS技术》
本文重点讲解CSS技术中文本样式的 vertical-align 属性的详细用法。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。
vertical-align属性的用法较为复杂，该属性的取值较多，不了解这个属性用法的学习者，一定要坚持把这篇文章读完。
一、设置垂直方向的对齐方式：
CSS技术利用 vertical-align 属性来设置内联元素的垂直对齐方式
该属性的功能是：设置内联元素或内联块元素相对于所在行其他元素的垂直对齐方式。这里在对齐时，都是考虑基线的对齐，即内联元素的基线相对于所在行其他元素的基线的垂直对齐方式。
这里需要注意的一定要是“内联元素”或“内联块元素”。
【有关“内联元素”的知识，可以参考小海老师前面写的《CSS段落对齐方式，系统认识块级元素与内联元素，CSS前端进阶篇》一文】
该属性的取值可以有以下几种：
带有单位的数值，可以取负值，在基线对齐的基础上，内联元素向下移动一定的距离（正值）或者向上移动一定的距离（负值）。
%，可以取负值，在基线对齐的基础上，内联元素向下移动line-height属性的百分比的距离（正百分比）或者向上移动line-height属性的百分比的距离。
baseline，【默认值】基线对齐，内联元素的基线与所在行的其他元素的基线对齐。
sub，上标。
super，下标。
top，顶部对齐，内联元素的顶部与所在行的其他元素中最高的元素的顶部对齐。
text-top，文本顶部对齐，内联元素的顶部与所在行的文字顶部对齐。
middle，中部对齐，内联元素的中部与所在行其他元素的中部对齐。
bottom，底部对齐，内联元素的底部与所在行的其他元素中最低的元素的底部对齐。
text-bottom，文本底部对齐，内联元素的底部与所在行的文字底部对齐。
二、基线垂直对齐：
要想深入了解vertical-align属性各项取值的含义，首先，让我们先看一看什么是基线对齐。
例1：在段落标记<p></p>内部，放置一个图片和一行文字。HTML代码如下。
<p>
<img src="images/a.jpg" /> 小海前端
</p>
得到的效果如下图所示，仔细观察下图：图片底部和文字底部是对齐的吗？
例1的最终效果
仔细观察，其实它们底部并没有完全对齐。如果将文字的字号放大，可以看得更加明显。
将例1中的文字放大后的效果
上图中，由于文字字号的变大，在图片中只呈现了一个“小”字，但是我们完全可以看出，图片的底部并没有和文字的底部对齐。而对齐文字的这个位置实际上是文字的“基线”。
【有关“基线”的知识，可以参考小海老师前面写的《CSS段落行高，竟然能够实现垂直居中功能，神奇的CSS技术》一文】
原来，图片本身属于内联元素，而 内联元素的vertical-align属性的默认取值为baseline，即基线对齐，也就是图片的基线（底部）默认和文字的基线对齐了。
三、取值为“带有单位的数值”：
如果vertical-align属性的取值为带有单位的数值，则也是在基线对齐的基础上开始上下移动一定的距离。
如果图片的vertical-align属性取值为0px，则依然为基线对齐的位置。
如果图片的vertical-align属性取值为5px，则在基线对齐位置的基础上向下移动5px的距离。
如果图片的vertical-align属性取值为-5px，则在基线对齐位置的基础上向上移动5px的距离。
四、取值为“百分比 ”：
如果vertical-align属性的取值为百分比，则也是在基线对齐的基础上开始上下移动一定的距离。
那么，问题来了。
百分比意味着移动多少像素的距离呢？
百分比又是以什么距离为基准的呢，即谁的百分比呢？
我们前端开发工程师一定要记住：vertical-align属性的百分比取值不是父元素高度的百分比，而是 line-height 属性取值的百分比。
即：vertical-align属性的百分比取值是以line-height属性的取值为基准的，及移动距离为vertical-align属性的绝对值乘以line-height属性取值的距离数。
假设：容器的line-height属性取值为20px，则：
如果图片的vertical-align属性取值为0%，则依然为基线对齐的位置。
如果图片的vertical-align属性取值为50%，则在基线对齐位置的基础上向下移动(20px*50%)的距离，即向下移动10px。
如果图片的vertical-align属性取值为-50%，则在基线对齐位置的基础上向上移动(20px*50%)的距离，即向上移动10px。
五、取值为top和text-top：
例2：我们在例1的基础上在段落<p></p>中再添加一个图片，并设置图片的高度大于文本。
仔细阅读下列HTML代码：
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:top" />
小海前端
<img src="images/a.jpg" width="500" />
</p>
从代码中可以看出，文字“小海前端”左侧的图片设置了vertical-align属性，并取值为top。根据文字“小海前端”左右的两张图片的width属性可知，右侧图片的高度肯定比较高。
效果如下图所示。
例2的最终效果
原因是：vertical-align属性取值为top是指让设置了该属性的元素顶部和同行周围元素中最高元素的顶部对齐。从图中可知，显然最高的元素是右侧的图片，因此就呈现为上图中的外观了。
而右面的图片没有设置vertical-align属性，因此依然为“基线对齐”，即右侧图片的底部对齐文字的基线。
例3：在例2的基础上，我们将右侧图片的高度缩小至比文字还小的程度，那可想而知，左侧图片就应该与文字顶部对齐了。
仔细阅读下列HTML代码：
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:top" />
小海前端
<img src="images/a.jpg" width="100" />
</p>
从代码中可以看出，右侧图片的宽度由500改为了100，同时高度也会随之等比缩小。
最终效果如下图所示：
例3的最终效果
例4：在例2的基础上，我们调整左侧图片vertical-align属性的取值为text-top，则HTML代码如下。
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:text-top" />
小海前端
<img src="images/a.jpg" width="500" />
</p>
则最终的显示效果如下图所示。
例4的最终效果
原因是：text-top属性是要求内联元素与同行内文本的顶部对齐。因此，就出现了上图中的效果。
而右面的图片没有设置vertical-align属性，因此依然为“基线对齐”，即右侧图片的底部对齐文字的基线。
vertical-align属性还具备bottom和text-bottom取值，和这两个顶部对齐（top和text-top）的含义是类似的，希望同学们自己在电脑上尝试一下。
下一篇文章中，小海老师会为大家讲解一个vertical-align属性和line-height属性的应用，用于去掉图片在容器中放置时，底部产生的小距离。这是前端开发中非常经典的bug解决方案，对于希望深入了解前端开发的学习者真的是非常重要。
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
在头条上所写的这些文章都是从前端开发的基础开始一步一步讲起的。小海老师非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我精心整理和系统归纳过的。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
许多方法可以将HTML元素与CSS对齐，但是一起使用或单独使用它们并不是那么容易。开发人员所面临的困难之一就是试图将元素集中在页面中间。
因此，在本文中，我将展示一些最常用的方法，即通过使用不同的CSS属性在水平和垂直方向上居中图像。
让我们开始使用3个不同的CSS属性将图像水平居中。
使图像水平居中的第一种方法是使用text-align属性。但是，仅当图像位于块级容器（例如<div>）内时，此方法才有效：
使图像居中的另一种方法是使用margin：auto属性（用于左边距和右边距）。但是，单独使用margin：Auto将不适用于图像。如果需要使用margin：auto，则还必须使用2个其他属性。
margin-auto属性对内联级别的元素没有任何影响。由于<img>标签是一个内联元素，因此我们需要先将其转换为块级元素：
其次，我们还需要定义宽度。因此，左右边缘可以占用其余的空白空间并自动对齐，可以这样解决问题（除非我们给出100％的宽度）：
将图像水平居中的第三种方法是使用display：flex。同样，我们对容器使用text-align属性，它也会使用display：flex。但是，仅使用display：flex是不够的。容器还必须具有一个称为justify-content的附加属性。
justify-content属性与display：flex一起使用，我们可以使用它水平放置图像的中心。最后，图像的宽度必须小于容器的宽度，否则，它会占用100％的空间，然后我们就无法对其进行集中化。
1、Display: Flex
对于垂直对齐，使用display：flex确实很有帮助。考虑到我们的容器的高度为800px，但图像的高度仅为500px：
现在，在这种情况下，向容器中添加一行代码（align-items：center）就可以了：
如果将align-items属性与display：flex一起使用，就会将元素垂直放置。
2、位置：绝对和变换属性
垂直对齐的另一种方法是一起使用position和transform属性。这个有点复杂，所以让我们一步一步地做。
步骤1：定义绝对位置
首先，我们将图像的定位行为从静态更改为绝对：
同样，它应该位于相对放置的容器内，因此我们添加一个位置：相对于其容器的div。
步骤2：定义顶部和左侧属性
其次，我们定义图像的顶部和左侧属性，并设置为50％。这会将图像的起点（左上角）移到容器的中心：
步骤3：定义变换属性
在第二步的时候已经将图像的一部分移出容器。因此，我们需要将其取回内部。在图像上定义转换属性，并在其X和Y轴上添加负50％可以达到目的：
还可以使用其他方法进行水平和垂直居中，我这里只尝试了最常用的方法。希望这篇文章可以帮助你了解如何在页面中心对齐图像。
篇文章主要给大家介绍一下如何使用html+css实现元素的水平与垂直居中效果，这也是我们网页在编码制作中会经常用到的问题。
主要实现css代码：
水平居中：text-align:center;
垂直居中：line-height:XXpx; /*line-height与元素的height的值一致*/
我们先来看这样一个例子，加入我们这里有一个div，宽度和高度为300px，背景颜色为黑色，然后在div中有一行简短文字，我们只需要使用line-height:200px;就可以实现文字的居中效果，具体的代码如下所示：
由上图可以看出我们实现了单行文字的垂直居中效果，但是很多时候我们的文字并不知道具体有多少，可能有一行，也可能有很多行，那么遇到多行文字的这种问题我们要如何处理呢。
对于多行文本的垂直居中我们有很多种实现方式，我们这里逐个的来看一下；
1、使用display:table来实现
主要实现代码：
display: table使块状元素成为一个块级表格;
display: table-cell;子元素设置成表格单元格;
vertical-align: middle;使表格内容居中显示，即可实现垂直居中的效果;
具体的html与css的代码就如下所示：
2、使用absolute与transform配合实现
主要实现代码：
position:absolute; 首先给文本绝对定位；
left:50%;top:50%;transform:translate(-50%,-50%); 让文本距离盒子左边和上边分别为50%，再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了。
具体的html与css的代码就如下所示：
3、使用flex实现
主要实现代码：
display: flex;设置 display 属性的值为 flex 将其定义为弹性容器
align-items: center;定义项目在交叉轴（纵轴）上如何对齐，垂直对齐居中
justify-content: center; 定义了项目在主轴上的对齐方式，水平对齐居中
具体的html与css的代码就如下所示：
好了，本篇文章就给大家说到这里，大家自己动手写一下看能不能写出一样的页面效果出来，也可以找一些类似的页面自己练习一下，有需要源码的可以直接私信【网站源码】即可。
每日金句：了解别人心里想什么，你才能得到自己想要的。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。
*请认真填写需求信息，我们会在24小时内与您取得联系。
