持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第6天,点击查看活动详情
相信大多数掘友们应该都用过 vertical-align ,它可以用于行内元素和表格元素中实现垂直方向的居中。但在以往的使用中,我却发现了一些意外情况,让我们来看看吧!知道vertical-align 原理的小伙伴可以直接关掉文章了—.—
css
.container {
background-color: aquamarine;
}
img {
width: 280px;
}
html
<div class="container">
<img
src="https://picsum.photos/280/280">
</div>
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
有没有感觉像小学读书时用的拼音格子本。记得那时候还说着一口方言呢,哈哈,有点扯远了。来看下面的解释吧!
vertical-align
默认是 基线对齐(baseline
),也就是自己的基线和父盒子的基线对齐,而图片img莫得的基线为自己的底部,所以父盒子下方会有挤出来一段距离,
解决方案:
vertical-align: middle;
根据mdn的解释我们可以发现 vertical-align: middle;
的意思是:使元素的中部与父元素的基线加上父元素 x-height(译注:x 高度)的一半对齐。这里所说的 x-height 是指英文字母 x 的高度的意思。
通常 x 的垂直中心点不是父元素的垂直中心点,且会随着父元素字体的大小变化而变化,所以才造成上下会齐出一段距离
解决方案:
我是 AndyHu,目前暂时是一枚前端搬砖工程师。
文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注呀😊
未经许可禁止转载💌
speak less,do more.