图片居中小问题

记一个简单的图片居中时遇到的小问题
在使用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: 表示以后不会再用这种居中方法偷懒了(好好用定位或弹性布局吧…)。

相关推荐