问

css3 - img垂直水平居中问题

袁沮战_246 发布于 2022-11-07 18:35

.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垂直水平居中为什么会有一像素的空隙：

11 个回答

img标签设置display: inline-block;vertical-align: middle;

2022-11-12 01:41 回答

伊利纯羊毛
方法有给box设置font-size:0;
给IMG标签设置display:block;
或者使用负margin.或者写flaot.因为元素浮动后也就是display:bolck了

2022-11-12 01:41 回答

月曳柳覀梢
采用通配符*
```
*{
    margin:0;
    padding:0;
}
```
2022-11-12 01:41 回答

我木良心c
https://segmentfault.com/q/1010000004076322/a-1020000004078865

2022-11-12 01:41 回答

_嗚啦啦900
网上有专门讨论这个的，一般解决是设父元素的font-size:0，好像记得是因为字体的“底线”位置吧。设为0那就不受影响了。同样的文字居中也不是完全居中的，和它的“底线”位置有关。

2022-11-12 01:41 回答

灵绾绾
嗯，楼上的哥们说的都对了，我也遇到过。。。图片中的兔子好可爱，哈哈！

2022-11-12 01:41 回答

PearlLisa530
img行内块级元素的原因，父元素设font-size:0；可解决。还有其他几种解决办法，可以搜一下，手机打字不方便提供传送门

2022-11-12 01:41 回答

血玉残阳
这个跟vertical-align：middle无关，而是跟你的display:table-cell有关，至于原理我也未清楚，不过你在image 中float:left就可以解决空隙

2022-11-12 01:41 回答

可爱de小蜗牛
http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/ 这篇文章是极好的

2022-11-12 01:41 回答
https://jsfiddle.net/06m9orbL/

那一点空隙是基线来的，结合你的display:table-cell的属性来看，那个是基线的一半，因为.box的中心会跟里面的匿名行框中心对齐。

可以看看w3c关于display:table和vertical-align的说明 https://www.w3.org/TR/CSS22/tables.html#height-layout

2022-11-12 01:41 回答

Json
方法1. 给img加display:block样式
方法2. 给.box加font-size:0样式

2022-11-12 01:41 回答

吉翠芙_899

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签