图片垂直居中小问题

最新推荐文章于 2024-04-25 13:27:51 发布

zmx182051

最新推荐文章于 2024-04-25 13:27:51 发布

阅读量711

点赞数

分类专栏：前端文章标签：垂直居中

本文链接：https://blog.csdn.net/zmx182051/article/details/86555335

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

记一个简单的图片垂直居中时遇到的小问题
在使用vertical-align:middle对图片进行垂直居中时，发现无论怎样都不能垂直居中,后来找了半天，发现了问题，原因是添加了float属性，float属性会将元素转化为块级元素（相当于又给元素添加了display:block），将display:table-cell 给覆盖了。将float去除即可。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        	*{
        		margin:0;
        		padding:0;
        	}
        	.main{
        		height:110px;
        		background: gray;
        		width:200px;
                vertical-align: middle;
                display: table-cell;
                /* float:left; */
            }
            img{
                 vertical-align: middle;
        	}
        </style>
    </head>
    <body>
    <div class="main">
        <img src="images/dog.jpg" height="100" width="100">
    </div>
    </body>
</html>

终于居中了：
在这里插入图片描述
问题虽小，却容易犯。
PS: 表示以后不会再用这种居中方法偷懒了(好好用定位或弹性布局吧…)。

zmx182051

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片垂直居中小问题

记一个简单的图片居中时遇到的小问题在使用vertical-align:middle对图片进行居中时，发现无论怎样都不能垂直居中,后来找了半天，发现了问题，原因是添加了float属性，float属性会将元素转化为块级元素（相当于又给元素添加了display:block），将display:table-cell 给覆盖了。将float去除即可。&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;...
复制链接

扫一扫