vertical-align使用方法

最新推荐文章于 2024-03-11 20:25:07 发布

古塔前端

最新推荐文章于 2024-03-11 20:25:07 发布

阅读量6.2k

点赞数 21

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_45321331/article/details/110768379

版权

css 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

介绍:
vetical-align主要用来处理图片和文字直接的位置关系

首先我们需要了解中文文本的组成,文本有基线、底线、中线、顶线组成。
在这里插入图片描述

可以把文字想象在一个文本框里面,文本四条线的高度,构成了文本框的高。

演示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border-bottom: 1px solid #333;
        }
        
        img {
            box-sizing: border-box;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div>
        <img src="apple.jpg" alt="">
        <span>大家好</span>
    </div>
</body>

</html>

效果:
在这里插入图片描述
可以看到图片和文字之间存在了空白分析,原因就是因问css图片默认vertical-align: baseline,可以通过改变vertical-align的参数,来改变图片与文字之间的关系。

vertical-align属性说明
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐，只对行内元素和行内块元素有效

参数:

参数	作用
baseline	默认值,与所在行的基线对齐
top	与所在行的顶部对齐
bottom	与所在行的底部对齐
middle	与所在行的中间对齐

效果展示:

top值
baseline默认值
bottom值

4.![在这里插入图片描述](https://img-blog.csdnimg.cn/20201206221044410.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTMyMTMzMQ==,size_16,color_FFFFFF,t_70

解决图片之间的空白缝隙

给img标签转换为display:block
1.1. 这可以解决上面图片的空白缝隙,左右图片解决不了
解决左右相邻图片空白缝隙,给图片添加浮动

古塔前端

关注

21
点赞
踩
127

收藏

觉得还不错? 一键收藏
1
评论
vertical-align使用方法

介绍:vetical-align主要用来处理图片和文字直接的位置关系首先我们需要了解中文文本的组成,文本有基线、底线、中线、顶线组成。可以把文字想象在一个文本框里面,文本四条线的高度,构成了文本框的高。演示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device.
复制链接

扫一扫