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

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

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>

运行结果:
css vertical-align实现行内块和文字水平居中对齐_第1张图片

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>

有一个缝隙
css vertical-align实现行内块和文字水平居中对齐_第2张图片
在input中添加vertical-align: middle;就解决了
css vertical-align实现行内块和文字水平居中对齐_第3张图片

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>

可以很明显的看到图片下面有多余的地方
浏览器把行内和行内块标签当做文字处理,默认基线对齐
css vertical-align实现行内块和文字水平居中对齐_第4张图片
此时,给img添加vertical-align: middle;就可以解决了
css vertical-align实现行内块和文字水平居中对齐_第5张图片
给图片添加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>

css vertical-align实现行内块和文字水平居中对齐_第6张图片

你可能感兴趣的:(css,css,前端,css3)