CSS垂直对齐

最新推荐文章于 2024-07-31 14:35:30 发布

桐叶~

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量26

点赞数

分类专栏： # CSS3 文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_57851747/article/details/134606986

版权

CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

css垂直对齐

场景：浏览器遇到行内和行内块当作文字处理，默认文字是按基线对齐，会出现对不齐的情况

属性名: vertical-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>
        input {
            /* 浏览器遇到行内和行内块当作文字处理，默认文字是按基线对齐 */
            height: 50px;
            box-sizing: border-box;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <input type="text"><input type="button" value="搜索">
</body>
</html>

图片加行内块或行内，给图片添加垂直对齐方式
案例二：

<!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>
        /* 图片加行内块或行内，给图片添加垂直对齐方式 */
        img {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <img src="./元素层级问题.png" alt=""><input type="text">
</body>
</html>

input顶对齐盒子
案例三：

<!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>    
        .father {
            height: 211px;
            width: 211px;
            background-color: pink;
        }
        input {
            vertical-align: top;

        }
    </style>
</head>
<body>
    <div class="father">
        <input type="text">
    </div>
</body>
</html>

盒子和图片对齐，一种方法跟上述一样，第二种方法是转块级显示模式
案例四：

<!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>
        .father {
            width: 400px;
            background-color: pink;
        }
        img {
            /* 第一种 */
            /* vertical-align: middle; */
            /* 浏览器遇到行内和行内块当作文字处理，默认文字是按基线对齐 */
            /* 第二种 */
            display: block;
        }
    </style>
</head>
<body>
    <div class="father">
        <img src="./pvp.png" alt="">
    </div>
</body>
</html>

文字对齐方式也可控制行内或行内块
案例五：

<!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>
        .father {
            width: 600px;
            height: 600px;
            background-color: pink;
            /* 文字对齐方式也可控制行内或行内块 */
            line-height: 600px;
            text-align: center;
        }
        img {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="father">
        <img src="./pvp.png" alt="">
    </div>
</body>
</html>

桐叶~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS垂直对齐

场景：浏览器遇到行内和行内块当作文字处理，默认文字是按基线对齐，会出现对不齐的情况。/* 浏览器遇到行内和行内块当作文字处理，默认文字是按基线对齐 *//* 浏览器遇到行内和行内块当作文字处理，默认文字是按基线对齐 */盒子和图片对齐，一种方法跟上述一样，第二种方法是转块级显示模式。/* 图片加行内块或行内，给图片添加垂直对齐方式 *//* 文字对齐方式也可控制行内或行内块 */图片加行内块或行内，给图片添加垂直对齐方式。属性名: vertical-align。文字对齐方式也可控制行内或行内块。
复制链接

扫一扫