摘要：上例中，左边盒子的基线为其底边缘，右边盒子的基线为的基线将右边盒子的行高设置为，即这个的高度为，位置处于中间。
vertical-align的值
线类：baseline（默认）, top, bottom, middle
文字类：text-top, text-bottom
上标下标类：sub, super
数值：1px, 1em - 在baseline对齐的基础上上下偏移一定数值
百分比：相对于line-height计算
vertical-align起作用的前提只作用于inline水平元素以及"table-cell"元素
注意：float和position: absolute会使元素块状化
vertical-align与line-heightinline元素都有vertical-align和line-height，默认基线对齐
inline元素对齐https://codepen.io/curlywater...
上例中，inline元素默认基线对齐，并未和容器贴合；
设置vertical-align为top，这时不再与基线对齐，和容器贴合；
设置line-height为0，但基线与底边重合，仍旧是基线对齐，此时元素和容器贴合。
对齐方式总结：
清除vertical-align
修改vertical-align值
元素block化
line-height为0
设置line-height为0
line-height为数值的情况下，可以设置font-size为0
inline-block基线inline-block元素的基线是inline-block内最后一个line box的基线；如果inline-block内没有line box或者其本身的overflow不为visible，基线是自身的margin底边缘。
https://codepen.io/curlywater...
上例中，左边盒子的基线为其底边缘，右边盒子的基线为line box的基线；
将右边盒子的行高设置为0，即baseline这个line box的高度为0，位置处于content area中间。
inline|inline-block元素：元素底部和父级底部对齐
table-cell元素：底padding边缘和table-row底部对齐，多余部分padding填充
inline|inline-block元素：元素顶部和父级顶部对齐
table-cell元素：顶padding边缘和table-row顶部对齐，多余部分padding填充
inline|inline-block元素：元素的垂直中心点和父元素基线上的1/2 x 高度处对齐，也就是x的中心点
使用vertical-align:middle只是近似垂直居中，因字符有下沉的特性，所以x的中心点是低于容器实际中心线的，字体较小的情况下肉眼看不出区别而已
https://codepen.io/curlywater...
table-cell元素：table-cell元素的高度有table-row中最高的那一个单元格决定，内容未撑满高度时，使用padding填充
文本类属性值text-top：元素顶部和父级content area的顶部对齐
text-bottom：元素底部和父级content area的底部对齐
只与父级的font-size有关，与父级line-height无关，与兄弟元素的line-height无关
上标下标类属性值super：提高元素的基线到父级的上标基线位置
sub：降低元素的基线到父级的下标基线位置
关注自身和父级，前后元素并没有影响
vertical-align的应用多行文字垂直居中
https://codepen.io/curlywater...
容器指定高度
需要居中的行内元素设置display: inline-block; vertical-align: middle
加一个与容器高度相同，vertical-align: middle; display: inline-block辅助元素
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117044.html
摘要：内联盒子的高度由决定，限制包含盒子的高度，两者一致，即把内联盒子安放在包含盒子内，排除其他外界干扰。这时候由内联盒子模型可知，行间距是等分的，中间部分是，达到看似居中的效果。可以得到结论和设置一致，并非是完全垂直，除非为。 张鑫旭的CSS深入理解之line-height学习笔记 line-height的定义 行高：两行文字基线之间的距离 为何是基线：基线是定义所有字线的根本 不同字体...
摘要：内联元素的外边缘与该行高的顶部和底部边缘对齐。如果行高小于字体的高度，不会受影响，但会对齐文本边界。红线表示边界，蓝线表示，黄色为，白色为区域，绿色为区域。的确定规则元素的是它的第一行的。 前言 为什么写这篇总结？最近在文字图标垂直对齐上用到css的vertical-align属性，但是有的时候有效，有的时候无效，常常疑惑不解，反思这是自己对vertical-align的基本认知不够造...
摘要：但实质上，只要是内联元素，这两个元素都会同时在起作用。而解决方案可以有以下几种元素不使用基线对齐，可以改为对齐元素块状化设置为设置为总结讲解了的各类属性值及其效果起作用的前提是内联元素与都是同时作用在内联元素上的 前言 vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。也就是说，对于块级元素，vertical-align...
摘要：前言之前在写网页的时候有一个展示图片的需求我使用一个包裹一个但是在浏览器中预览的时候碰到了一下的问题仔细看图片和之间有间隙。正文指定了行内元素或表格单元格元素的垂直对齐方式摘录自。设置父元素字体大小为所用的值是无单位数值乘以元素的。 前言 之前在写网页的时候有一个展示图片的需求,我使用一个div包裹一个img,但是在浏览器中预览的时候碰到了一下的问题,showImg(https://s...
阅读 1199·2023-04-25 15:53
阅读 2078·2021-11-19 09:40
阅读 3419·2021-10-11 10:59
阅读 2050·2019-08-30 15:55
阅读 1936·2019-08-30 15:54
阅读 2254·2019-08-29 13:03
阅读 2722·2019-08-28 18:17
阅读 1472·2019-08-27 10:51
