从前端小白到大佬图片与文字对齐

最新推荐文章于 2023-04-17 08:42:00 发布

一只琳娜

最新推荐文章于 2023-04-17 08:42:00 发布

阅读量2.6k

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/my_prince/article/details/108683316

版权

css vertical-align

选择器{
vertical-align：xxx；
}
vertical之对于行内块有效
vertical-align: baseline(基线)/top（顶线）/middle（中线）/bottom（底线）

1.解决图片、文本域与文字居中对齐

<!doctype html>
<html>

<head>
    <meta charset='UTF-8' />
    <title>damoe</title>
    <style>
        img {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <img src="imgs/hot.png">asbnvfckdjsbv
</body>

</html>

在这里插入图片描述
2.解决图片空白缝隙
图片加载到网页中，默认都是与文字实现基线对齐的，从而会让图片与盒子之间有缝隙存在，如图：
消除缝隙的办法就是直接更改图片的对齐方式，只要不是基线对齐便都能消除缝隙。

 <!doctype html>
<html>

<head>
    <meta charset='UTF-8' />
    <title>damoe</title>
    <style>
        div {
            border: 5px solid rebeccapurple;
        }
        
        div img {
            vertical-align: top;
        }
    </style>
</head>

<body>
    <div>
        <img src="imgs/03.jpg">asbnvfckdjsbv
    </div>

</body>

</html>

在这里插入图片描述