彻底搞懂vertical-align 底线、基线、中线的含义

前言

相信大多数掘友们应该都用过 vertical-align ，它可以用于行内元素和表格元素中实现垂直方向的居中。但在以往的使用中，我却发现了一些意外情况，让我们来看看吧！知道vertical-align 原理的小伙伴可以直接关掉文章了—.—

例子

例1. 父盒子没设置高度，为什么底部还挤出来一段距离？

css

.container {background-color: aquamarine;
}
img {width: 280px;
}

html

<div class="container">
<imgsrc="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">
<imgsrc="https://picsum.photos/280/280">
</div>

基本概念解释

先来看下底线、基线、中线的基本含义吧，下面的图片解释了行高和这三根线的位置。

底线（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就可以了；

彻底搞懂vertical-align 底线、基线、中线的含义相关推荐

2021-08-06随记(vertical-align, 顶线、底线、中线、基线，vue原理理解)
vertical-align 父元素是inline或者是table-cel,如果是inline-block或者block则必须要设置line-height(和高度一样)子元素为inline或者inli ...
一文多图搞懂KITTI数据集下载及解析
转载自一文多图搞懂KITTI数据集下载及解析-阿里云开发者社区 KITTI Dataset 1.图片下载:点击下载:https://s3.eu-central-1.amazonaws.com/avg- ...
【SVG】路径＜Path＞标签详解，一次搞懂所有命令参数
在上一篇文章什么是SVG?--SVG快速入门中我对SVG做了基础的介绍,这篇文章将集中讲解<path>标签本站链接:什么是SVG?--SVG快速入门_gxyzlxf的博客-CSDN博 ...
zhs16gbk对应mysql_[Oracle] 彻底搞懂Oracle字符集
基本概念字符集(Character set):是一个系统支持的所有抽象字符的集合.字符是各种文字和符号的总称,包括各国家文字.标点符号.图形符号.数字等.常见的字符集有ASCII,ZHS16GB231 ...
面试必备|带你彻底搞懂Python生成器
2019年人工智能系统学: https://edu.csdn.net/topic/ai30?utm_source=ai100_bw 作者 | Rocky0429 转载自 Python空间(ID:Dev ...
20分钟教你搞懂Git！
Git 是最流行的版本管理工具,也是程序员必备的技能之一.本文就来教你 20 分钟搞懂 Git! 以下为译文: 尽管每天你都会用到Git,但也有可能搞不懂它的工作原理.为什么Git可以管理版本?基本命 ...
搞懂机器学习的常用评价指标！
↑↑↑关注后"星标"Datawhale 每日干货 & 每月组队学习,不错过 Datawhale干货作者:陈安东,湖南大学,Datawhale成员我与评价指标的首次交锋是 ...
一文搞懂结构体的定义及实际使用
大家好,我是无际,无实战不理论. 今天给大家讲一下结构体. 大家可能很好奇,为什么这种文章教程泛滥了,我还要拿出来讲. 相信无际的铁粉都知道,我分享的干货和经验出发点是实际产品应用. 脱离产品你所学的 ...
想要彻底搞懂“异地多活”，看完这篇就够了
在软件开发领域,「异地多活」是分布式系统架构设计的一座高峰,很多人经常听过它,但很少人理解其中的原理. 异地多活到底是什么?为什么需要异地多活?它到底解决了什么问题?究竟是怎么解决的? 这些疑问,想必 ...
这一次，你能彻底搞懂 Flink！
近年来,AI 场景发展得如火如荼,同时其计算规模也越来越大.这也让专注于数据处理的 Flink 有了较大的发展空间.Flink作为在大数据生态里实时处理的一个新框架,在一定程度上也有一定的难度. Fl ...

彻底搞懂vertical-align 底线、基线、中线的含义

前言

例子

例1. 父盒子没设置高度，为什么底部还挤出来一段距离？

例2. 设置了 `vertical-align: middle;`，为什么图片还没有垂直居中与父盒子？且上边挤出的距离大于下边挤出的距离？

基本概念解释

解答例子中的问题

例1

例2

彻底搞懂vertical-align 底线、基线、中线的含义相关推荐

最新文章

热门文章

彻底搞懂vertical-align 底线、基线、中线的含义

前言

例子

例1. 父盒子没设置高度，为什么底部还挤出来一段距离？

例2. 设置了 vertical-align: middle;，为什么图片还没有垂直居中与父盒子？且上边挤出的距离大于下边挤出的距离？

基本概念解释

解答例子中的问题

例1

例2

彻底搞懂vertical-align 底线、基线、中线的含义相关推荐

最新文章

热门文章

例2. 设置了 `vertical-align: middle;`，为什么图片还没有垂直居中与父盒子？且上边挤出的距离大于下边挤出的距离？