前端学习笔记65-文本的水平和垂直对齐

最新推荐文章于 2022-09-15 11:20:42 发布

小欣CZX

最新推荐文章于 2022-09-15 11:20:42 发布

阅读量465

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45034895/article/details/116427372

版权

小白前端学习专栏收录该内容

100 篇文章 7 订阅

订阅专栏

前端学习笔记65-文本的水平和垂直对齐

text-align
vertical-align
图片基线

text-align

功能：文本的水平对齐
可选值：
left：左侧对齐
right：右侧对齐
center：居中对齐
两端对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:500px;
            border:1px red solid;
            text-align:right;
        }            
    </style>
</head>
<body>
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non itaque dignissimos modi libero rerum odio. Pariatur ex ab rem tenetur laborum delectus optio quidem. Quae architecto veniam dolore debitis enim.</div>

</body>
</html>

在这里插入图片描述

vertical-align

先看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:500px;
            border:1px red solid;
            font-size: 50px;
        } 
        span{
            font-size:20px;
            border:1px blue solid
        }           
    </style>
</head>
<body>
    <div>今天天气abcd<span>真热abcd</span></div>

</body>
</html>

在这里插入图片描述

这里span的字体比较小。如果我想让span和它的父元素顶部对齐，咋办？
先了解基线，基线很简单，我们以前学英语的时候，用四线格写字母，从上往下数第三行就是基线。
用vertica-align。
可选值：
baseline：默认值，基线对齐
top：顶部对齐
bottom：底部对齐
middle：居中对齐

        span{
            font-size:20px;
            border:1px blue solid;
            vertical-align: bottom;
        }

在这里插入图片描述
注意居中对齐指的是如果你的父元素里有个字母x，那么span的中线和父元素x中线对齐，感觉没啥用，了解了解就行。

此外还可以只写写多少px，指定span向上移动多少px。(下移的话就写负的)

        span{
            font-size:20px;
            border:1px blue solid;
            vertical-align: 20px;
        }

在这里插入图片描述

图片基线

看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        p{
            border: 1px red solid;
        }        
    </style>
</head>
<body>
    <p>
        <img src="./img/an.jpg" alt="">
    </p>
</body>
</html>

在这里插入图片描述
看到了把，这里图片下方有点间隙，这就是图片的基线。有基线就会有这条间隙
这个实际上影响我们的布局，所以要处理下。
如何处理呢？只要修改它的垂直对齐，即不让它沿着基线对齐，就不会有缝了。

        p{
            border: 1px red solid;
        }  
        img{
            vertical-align: middle;
        }

在这里插入图片描述
好了没有了。

小欣CZX

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录