硬让学妹彻底搞懂vertical-align 底线、基线、中线的含义
2023-02-18 16:28:29 时间
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第6天,点击查看活动详情
前言
相信大多数掘友们应该都用过 vertical-align ,它可以用于行内元素和表格元素中实现垂直方向的居中。但在以往的使用中,我却发现了一些意外情况,让我们来看看吧!知道vertical-align 原理的小伙伴可以直接关掉文章了—.—
例子
例1. 父盒子没设置高度,为什么底部还挤出来一段距离?
css
.container {
background-color: aquamarine;
}
img {
width: 280px;
}
html
<div class="container">
<img
src="https://picsum.photos/280/280">
</div>
例2. 设置了 vertical-align: middle;
,为什么图片还没有垂直居中与父盒子?且上边挤出的距离大于下边挤出的距离?
css
.container {
width: 300px;
background-color: aquamarine;
line-height: 200px;
height: 200px;
}
img {
height: 190px;
vertical-align: middle;
}
html
<div class="container">
<img
src="https://picsum.photos/280/280">
</div>
基本概念解释
先来看下底线、基线、中线的基本含义吧,下面的图片解释了行高和这三根线的位置。
图片来源:https://blog.csdn.net/VickyTsai/article/details/103000077
- 底线(bottom line):上下底线之间的距离就是行高。
- 基线(base line):通俗的说就是与英文字母 x 最底边相切的那条线就是底线。
- 中线(middle line):垂直与x中点的那条线
有没有感觉像小学读书时用的拼音格子本。记得那时候还说着一口方言呢,哈哈,有点扯远了。来看下面的解释吧!
解答例子中的问题
例1
vertical-align
默认是 基线对齐(baseline
),也就是自己的基线和父盒子的基线对齐,而图片img莫得的基线为自己的底部,所以父盒子下方会有挤出来一段距离,
解决方案:
- 设置父盒子的字体为0,让基线和底线重合,这些就不会被挤出来了
- 想办法让img盒子的基线和父盒子的底线对齐,比如设置img盒子
vertical-align: middle;
例2
根据mdn的解释我们可以发现 vertical-align: middle;
的意思是:使元素的中部与父元素的基线加上父元素 x-height(译注:x 高度)的一半对齐。这里所说的 x-height 是指英文字母 x 的高度的意思。
通常 x 的垂直中心点不是父元素的垂直中心点,且会随着父元素字体的大小变化而变化,所以才造成上下会齐出一段距离
解决方案:
- 让父盒子的 字体设置为0就可以了;
写在最后
我是 AndyHu,目前暂时是一枚前端搬砖工程师。
文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注呀?
未经许可禁止转载?
speak less,do more.
相关文章
- JAVA只要掌握内部类,多继承和单继承都不是问题
- 今儿直白的用盖房子为例,给你讲讲Java建造者模式
- 用实例带你深入理解Java内存模型
- 你知道,java项目中是如何获取文件地址的吗?
- 【架构师(第十五篇)】脚手架之创建项目模板开发
- 【架构师(第十六篇)】脚手架之创建项目模板的下载与更新
- 【架构师(第十八篇)】脚手架之项目模板的安装
- 【架构师(第十九篇)】脚手架之组件库模板开发
- 【架构师(第二十篇)】脚手架之自定义模板及第一阶段总结
- 【架构师(第二十一篇)】编辑器开发之需求分析和架构设计
- 【架构师(第二十二篇)】编辑器开发之项目整体搭建
- 【架构师(第二十三篇)】编辑器开发之画布区域组件的渲染
- 【架构师(第二十四篇)】编辑器开发之添加模版到画布
- Java异常处理:如何写出“正确”但被编译器认为有语法错误的程序
- 我以订披萨为例,给女朋友详细讲了Java设计模式的3种工厂模式
- 【架构师(第二十五篇)】编辑器开发之属性编辑区域表单渲染
- 【架构师(第二十六篇)】编辑器开发之属性编辑同步渲染
- 2021年度“CCF-腾讯犀牛鸟基金”发布结题评优结果
- 【架构师(第二十七篇)】前端单元测试框架 Jest 基础知识入门
- 太空噗|重燃太空热潮!与噗噗星人一同探索星海浪漫