11
2085.box {
width: 300px;
height: 300px;
display: table-cell;
text-align: center;
vertical-align: middle;
border: solid 1px red;
transition: 1s;
}
.box img {
width: 150px;
height: 150px;
}
.box:hover img {
transform: scale(2);
}
img垂直水平居中为什么会有一像素的空隙：
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
方法1. 给img加display:block样式
方法2. 给.box加font-size:0样式
这个跟vertical-align：middle无关，而是跟你的display:table-cell有关，至于原理我也未清楚，不过你在image 中float:left就可以解决空隙
img行内块级元素的原因，父元素设font-size:0；可解决。还有其他几种解决办法，可以搜一下，手机打字不方便提供传送门
嗯，楼上的哥们说的都对了，我也遇到过。。。图片中的兔子好可爱，哈哈！
网上有专门讨论这个的，一般解决是设父元素的font-size:0，好像记得是因为字体的“底线”位置吧。设为0那就不受影响了。同样的文字居中也不是完全居中的，和它的“底线”位置有关。
采用通配符*
方法有给box设置font-size:0;
给IMG标签设置display:block;
或者使用负margin.或者写flaot.因为元素浮动后也就是display:bolck了
img标签设置display: inline-block;vertical-align: middle;