CSS中该怎么垂直居中？怎么去除图片底侧空白缝隙？

最新推荐文章于 2023-08-25 14:28:52 发布

奶盖不加糖

最新推荐文章于 2023-08-25 14:28:52 发布

阅读量231

点赞数

文章标签： css css3 html5 html

本文链接：https://blog.csdn.net/qq_44156869/article/details/113880925

版权

CSS 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

文章目录

- vertical-align 垂直对齐
- 去除图片底侧空白缝隙

vertical-align 垂直对齐

有宽度的块级元素居中对齐，是margin : 0 auto;
让文字居中对齐，是 text-align ： center;

vartical-align 垂直对齐，它只针对于行内元素或者行内块元素。
在这里插入图片描述

vertical-align : baseline | top |middle | bottom

设置或检索对象内容的垂直方式。

注意：

vertical-align 不影响块级元素中的内容对齐，它只针对于行内块元素或者行内块元素。
特别是行内块元素，通常用来控制图片、表单与文字对齐。

<head>
    <style>
        .one {
            /*默认的是基线对齐*/
            vertical-align: baseline;
        }
        .two {
            /*让图片的中线 对齐 文字的中线 垂直居中*/
            vertical-align: middle;
        }
        .three {
            /*让图片的顶线 对齐 文字的顶线*/
            vertical-align: top;
        }
    </style>
</head>

<body>
<div>
    <img src="images/bb.jpg" alt="" class="one">不准瞅
</div> 
<div> 
    <img src="images/bb.jpg" alt="" class="two">不准瞅
</div> 
<div> 
    <img src="images/bb.jpg" alt="" class="three">不准瞅
</div>
</body>

在这里插入图片描述

去除图片底侧空白缝隙

在这里插入图片描述

原因：

图片或者表单等行内块元素，他的底线会和父盒子的基线对齐。
就是图片底侧会有一个空白缝隙。

解决办法就是：

给 img 设置 vertical-align:middle | top ｜bottom 等等。让图片不要和基线对齐。
给 img 添加 display : block; 转换为块级元素就不会存在问题了。

案例：

<head>
    <style>
        div {
            border: 1px solid red;
        }
        div img {
            /*因为默认的就是基线对齐，所以底侧有空白缝隙*/
            /* vertical-align: baseline; */
            /* vertical-align: bottom;
            vertical-align: middle;
            vertical-align: top; */
            /*2.块级元素来说 verticla-align: 无效的，就不会有基线对齐的问题*/
            display: block;
        }
    </style>
</head>
<body>
    <div><img src="images/33.jpg" alt=""></div>
</body>