vertical-align 可以解决的问题

秋枫 ~

已于 2022-08-06 14:56:45 修改

阅读量1.6k

点赞数

分类专栏： CSS 文章标签：前端 css

于 2022-08-05 20:36:30 首次发布

本文是秋枫 ~原创文章，转载请附上博文链接！

本文链接：https://blog.csdn.net/weixin_43472938/article/details/126184957

版权

CSS 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

vertical-align 可以解决以下问题

1.文本框和表单按钮无法对齐问题

问题图

<!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>
        input {
            height: 40px;
            /* 自动内减，使其高度一致 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <input type="text"><input type="button" value="百度一下">
</body>
</html>

此时高度已经一致了，但还未对齐 ⬇
使用vertical-align顶部对齐使其对齐 ⬇

input {
            height: 40px;
            /* 自动内减，使其高度一致 */
            box-sizing: border-box;

            /* 1.垂直对齐方式 */
            vertical-align: top;
        }

此时已经对齐

在这里插入图片描述

2.input和img无法对齐问题

问题图

在这里插入图片描述

添加 vertical-align: bottom; 底部对齐

img {
            height: 100px;
            width: 100px;
             /* 底部对齐 */
            vertical-align: bottom;

        }

此时已经对齐

3.div中的文本框，文本框无法贴顶问题

问题图
给input标签加上 vertical-align: top;

.father {
            background-color: pink;
            width: 300px;
            height: 300px;
        }
input {
            /* 顶部对齐 */
            vertical-align: top;
        }

此时已经顶部对齐完成

在这里插入图片描述

4.div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题

问题图
给img标签添加 垂直对齐 或者 转换为块级元素 都可解决间隙问题

img {
            /* 方法一、垂直对齐方式 */
            vertical-align: bottom;
            /* 方法二、转换为块级元素 */
            display: block;
        }

此时已经无间隙

5.使用line-height让img标签垂直居中问题

问题图（使用line-height无法让img完全垂直居中）

在这里插入图片描述

给 img 添加 vertical-align: middle;

<!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>
        .father {
            background-color: pink;
            width: 600px;
            height: 600px;
            line-height: 600px;
        }
        img {
            height: 200px;
            width: 200px;
            /* 中部对齐 */
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="father">
        <img src="./image/cxk.jpeg" alt="">
    </div>

</body>
</html>