vertical-align 属性

最新推荐文章于 2024-08-11 20:51:44 发布

yi把菜刀

最新推荐文章于 2024-08-11 20:51:44 发布

阅读量5.4k

点赞数 4

分类专栏：前端学习 CSS

本文链接：https://blog.csdn.net/VAEaaaa/article/details/111412997

版权

前端学习同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

CSS苦逼学习日记（8）

下表为大部分的描述：

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标。
top	把元素的顶端与行中最高元素的顶端对齐 .。
text-top	把元素的顶端与父元素字体的顶端对齐。
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
inherit	规定应该从父元素继承 vertical-align 属性的值。
%	使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。

使用场景：解决图片底部默认空白缝隙的问题

bug：图片地测会有一个空白缝隙，原因是行内块元素会和文字的基线对其。
主要解决方法有两种：
1.给图片添加vertical-align:middle|top|bottom等属性（提倡使用的）
2.把图片转换为块级元素 display：block；

vertical-align 它只影响行内元素和行内块元素，不影响块级元素等，所以它最主要的是拿来使文字和图片对其，不让文字超过图片，影响其美观

以下为各个案例的主要代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 2px solid red;
        }
        img {
            vertical-align: 这里填middle，top等属性，自行设置体会;
        }
    </style>
</head>
<body>
    <div>
        <img src="../../images/yzfc.jpg" alt="">宇宙飞船
    </div>
</body>
</html>