css vertical-align实现行内块和文字水平居中对齐

lxl211

已于 2023-02-01 22:00:53 修改

阅读量1.2k

点赞数

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

于 2022-10-07 20:11:08 首次发布

本文链接：https://blog.csdn.net/lxllxl211/article/details/127198459

版权

css 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

行内快元素和行内元素,在浏览器看来会把行内块元素当作行内元素来处理,
所以图片的会和文字的基线对齐

vertical-align使用场景：
经常用于设置图片或者表单（行内块元素）和文字垂直对齐
语法：
vertical -align：
值                   描述
baseline        默认，元素位置放在父元素的基线上
top            把元素的顶端于行内最高元素的顶端对齐
middle          把此元素放在父元素的中部
bottom          把元素的顶端与行内最低元素的顶端对齐

1.使文字和图片居中对齐

操作:在img添加vertical-align: middle;属性即可解决
代码例子：

<style>
        img{
            vertical-align: middle;
        }
     </style>
</head>
<body>
    <img src="../css6/images/ldh.jpg" alt="">pink 做好自己，从我做起
</body>

运行结果：
在这里插入图片描述

2.解决input输入框和button确认按钮的不一致问题

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        input{
            box-sizing: border-box;
            height: 50px;
/* 解决input输入框和button确认按钮的不一致问题 */
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="button" value="确认">
</body>

有一个缝隙
在这里插入图片描述
在input中添加vertical-align: middle;就解决了

3.解决图片和父盒子大小不一样的问题

<style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 250px;
            background-color: pink;
        }

        img {
            /* vertical-align: middle; */
        }
    </style>
</head>

<body>
    <div>
        <img src="images/img.jpg" alt="">
    </div>
</body>

可以很明显的看到图片下面有多余的地方
浏览器把行内和行内块标签当做文字处理,默认基线对齐
在这里插入图片描述
此时,给img添加vertical-align: middle;就可以解决了

给图片添加display: block;也可以解决

4.让图片在父盒子里垂直居中

<style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 600px;
            height: 600px;
            line-height: 600px;
            background-color: pink;
        }
        img {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div>
        <img src="images/img.jpg" alt="">
    </div>
</body>

在这里插入图片描述