vertical-align属性的简单小结

W3school 对这个属性的描述

vertical-align 属性设置元素的垂直对齐方式。

说明

该属性定义行内元素的基线相对于该元素所在行的基线垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。默认值是 baseline ，继承性是 no 。

浏览器支持

所有的浏览器都支持 vertical-align 属性。

注释：

任何版本的 Internet Explorer 都不支持属性值 “inherit”。

可能的值

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

替换元素和非替换元素

前面学习元素的显示模式时，有个问题就是为什么像 img 这样的行内元素可以跟块元素一样可以设置宽高等属性？

替换元素

浏览器根据标签的属性来判断其显示的具体内容的元素称为替换元素（这些元素没有直接给出显示的内容），替换元素一般具有固定的尺寸（具体的宽高或者宽高比）。

例如：浏览器遇到 img 标签会根据它的 src 属性来显示内容，因为在审查元素时我们是看不到实体图片的，看到的只是它的 src 属性。而类似的浏览器遇到 input标签，会根据 input的 type属性来选择显示输入框还是选择框或者其他类型。

非替换元素

非替换元素像 p、span、div 等这些标签，他们直接将内容呈现给浏览器，然后直接显示出来。

替换元素和非替换元素并不是只在行内元素的分类，而是整 HTML 的元素分类。这意味着块级元素也有替换元素和非替换元素之分。

vertical-align属性的学习

vertical-align 属性的含义其实不是很难理解，难理解的是实际情景时的表现形式。我觉得我也没有完全搞清楚各种实际情景下的运用，各个浏览器的表现又有所不同。所以我觉得也没有必要去一个一个属性值地去深究（以后遇到再回头），现阶段就只需要先学会下面地两个应用场景吧。还有这篇文章（文章链接）个人觉得对于我们在理论上理解学习这个属性非常有用。

在实际开发中我们有时会遇到小图标和文字搭配使用时，并没有出现文字和图片中间对齐的效果。我们只需要给图片添加 vertical-align : middle; 声明就可以得到中间对齐的效果。例如以下是我写静态页面时的几句代码。

<style>
.login {
     
     
	float: right;
	margin: 36px 0px;	
}
.login img {
     
     
	/*vertical-align: middle;*/
}
.name {
     
     
	margin: 0 35px 0 3px ;
	/*行内元素可以设置左右外边距，左右有效，上下无效。*/
}
</style>
<div class="login">
    <img src="img/icon1.png" alt="" />
    <span class="name">
        qq_leishui
    </span>
</div>

没有给图片添加 vertical-align 属性时
在这里插入图片描述

添加 vertical-align : middle; 属性后
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TmjvJxzp-1594722329822)(https://s1.ax1x.com/2020/07/14/UUo9gO.png)]

还有一种情况是在放入图片时，因为默认 vertical-align : baseline; 所以图片下面会默认有一条空白缝隙。


<style>
	div{
     
     
		margin: 100px 0 0 100px;
		border: solid 2px;
	}
</style>
<body>
	<div>
		<img src="img/图10.1.png" alt="" />
	</div>
</body>

如图
在这里插入图片描述

例如我一开始学习写的页面的图片：

<style>
/*.content1 li img{ 
	vertical-align: bottom;
}*/
</style>
<body> 
   <li>
        <a href="#">
            <img src="img/c6.png" alt="" />
            <h3>Think PHP 5.0 博客系统实战项目演练</h3>
            <p><strong>高级</strong> &middot; 1125人在学习</p>
		</a>
	</li>
</body>

如图，图片和下面的文字会出现没有必要的空白缝隙（实际上是图片的 baseline 和行框的距离，具体概念请参考上面那个链接）。添加 vertical-align: bottom; 属性后缝隙消失。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LGn0clnY-1594722481484)(https://s1.ax1x.com/2020/07/14/UUosaR.png)]

可能在我们的学习时做的这些小练习有时候没有注意这个问题也不会影响你继续写下去。但是你如果对练习严格要求自己要和 psd 文件的尺寸一致，就要注意这个问题。（一开始写这个页面时我也没有注意这个问题，然后一直纠结为什么尺寸对不上。）

当然解决这个问题的方法还有很多，比如使用 display: block; 将图片转化为块级元素、设置浮动等。

扬尘 / 2020 / 12 / 22