父级div使用display:table-cell;vertical-align:middle会出现空隙。

父级div使用display:table-cell;vertical-align:middle会出现空隙。


1、html如下

 

2、css

.divCon{
	width:200px;
	height:200px;
	background:black;
	display: table-cell;
	vertical-align: middle;
	text-align:center;
}

.divCon img{
	width: 100%;
	height:100%;
}

3、显示效果:

父级div使用display:table-cell;vertical-align:middle会出现空隙。_第1张图片

4、问题:如上面红色圈出所示,父框会多出3px的高度

5、解决方法:

    a、让vertical-align在img中失效,给img设置display:block;使vertical-align:middle失效,因为它对块级元素不生效

    b、给Img设置ling-height:0px

    c、给父级div设置font-size:0

6、正常显示效果:

父级div使用display:table-cell;vertical-align:middle会出现空隙。_第2张图片

你可能感兴趣的:(css)