摘要：垂直居中当设置此时的页面看似垂直居中，但是并没有完全垂直居中。中线位置字符的中心并不是字符内容的绝对居中位置。这种通过定高，元素垂直居中的方法不仅适用于现代浏览器，连浏览器也是支持的。
今天在写样式时，icon和文字都进行了垂直居中的处理，但是icon并没有垂直居中，后来发现由于 line-height 和 vertical 一起使用导致与预期样式不同，特此对 vertical-align 总结进行！
vertical 支持很多属性：
/* 关键字值 */ vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; vertical-align: top; vertical-align: bottom; /* <长度> 值 */ vertical-align: 10em; vertical-align: 4px; /* <百分比> 值 */ vertical-align: 10%; /* 全局值 */ vertical-align: inherit; vertical-align: initial; vertical-align: unset;
当 vertical-align 和 line-height 同时出现时出现样式差异是由于：vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。
1、现象Div内包裹一个img标签，给div添加背景发现div下部分多出一部分留白空间，这个现象就是由于vertical-align和line-height共同起作用的原因。
对于内联元素，vertical-align与line-height虽然看不见，但实际上「到处都是」！
一个宽度为0, 表现如同普通字符的看不见的 “节点”。
对于上面的问题，给文字添加一个白色背景，效果如下：
Vertical-align默认的对齐方式为：baseline，也就是基线对齐。基线为文字的下边缘。
所以图片与文字的下边缘对齐，文字的高度是由行高决定。
图片默认是inline水平的，而vertical-align对块状水平的元素无感。因此，我们只要让图片display水平为block就可以了，我们可以直接设置display或者浮动、绝对定位等
给img标签添加display:block样式，将img变为块级元素发现问题消失了。
不用baseline，使用其他的属性值，比如：middle、top、bottom
lign属性后空白节点消失。
下面的空隙高度，实际上是文字计算后的行高值和字母x下边缘的距离。因此，只要行高足够小，实际文字占据的高度的底部就会在x的上面，下面没有了高度区域支撑，自然，图片就会有容器底边贴合在一起了。
div { line-height: 5px; }
Font-size可以间接改变line-height的值，也起到消除空白节点的作用。
当设置
div { line-height: 240px; }
img { vertical-align: middle; }
此时的页面看似垂直居中，但是并没有完全垂直居中。middle中线位置(字符x的中心)并不是字符内容的绝对居中位置。两个位置的偏差就是图片近似居中的偏差。
解决方案即：将空白节点也进行vertical-align:middle，但是直接操作不能实现，因此利用其他的方式,即 font-size:0
div { line-height: 240px; font-size: 0; }
img { vertical-align: middle; }
此时的垂直居中也就是真正的垂直居中。
这种通过line-height定高，元素vertical-align:middle垂直居中的方法不仅适用于现代浏览器，连IE7浏览器也是支持的。
div {
display:flex;
align-items:center;
}
align-items 属性定义flex子项在 flex 容器的当前行的侧轴（纵轴）方向上的对齐方式。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117513.html
摘要：所以文字最终可以在整个中垂直居中显示。默认值为，即把元素放在父元素的基线上。万万没想到用两行代码就实现了只要给容器加上下面两条样式，就成功垂直居中了，都是多余了的。 请一定看到最后，flex太令人惊喜！ ヾ(o◕∀◕)ﾉ 入个门 先来考虑这样一个问题：一行文字在一个固定高度的父div中怎样做到垂直居中？我们都知道设置父div的line-height 等于它的height就可以了，像下面...
摘要：所以文字最终可以在整个中垂直居中显示。默认值为，即把元素放在父元素的基线上。万万没想到用两行代码就实现了只要给容器加上下面两条样式，就成功垂直居中了，都是多余了的。 请一定看到最后，flex太令人惊喜！ ヾ(o◕∀◕)ﾉ 入个门 先来考虑这样一个问题：一行文字在一个固定高度的父div中怎样做到垂直居中？我们都知道设置父div的line-height 等于它的height就可以了，像下面...
摘要：包括水平居中，垂直居中，还有水平垂直居中。如果要再要细分，还要分浮动元素绝对定位的居中。样式水平居中的元素图片的水平居中图片的居中，比较特殊。 2018.05.29 居中一个元素？你会想到啥？这里面的知识还真不少。包括水平居中，垂直居中，还有水平垂直居中。如果要再要细分，还要分浮动元素、绝对定位的居中。为了代码简介，没有加背景和其他样式，需要看效果的，可以加上背景。 目录： 第一...
摘要：上一篇世界笔记二盒模型四大家族下一篇世界笔记四流的保护与破坏写在前面在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的，而头疼不已。 上一篇：《CSS世界》笔记二：盒模型四大家族下一篇：《CSS世界》笔记四：流的保护与破坏 写在前面 在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的1px，2px而头疼不已...
摘要：下的属性值详解以下内容均在中测试默认对齐方式这里作为参考系，而它的就是所要对齐的了。没有任何变化。那改变又如何呢为了让的清晰可见，特意添加一个的包裹着。 前言 一直听说line-height是指两行文本的基线间的距离，然后又说行高等于行距，最近还听说有个叫行间距的家伙，@张鑫旭还说line-height和vertical-align基情四射，贵圈真乱啊。。。。。。于是通过本篇来一探究竟...
阅读 3146·2021-09-26 09:46
阅读 1793·2021-09-13 10:23
阅读 2184·2021-09-02 09:47
阅读 3636·2021-08-16 11:01
阅读 1077·2021-07-25 21:37
阅读 1381·2019-08-30 15:56
阅读 369·2019-08-30 13:52
阅读 1835·2019-08-27 14:27
