点击排行榜更多>>

div和img上加上block块元素,图标不居中?
浏览: 发布日期:2020-08-13
        今天客户给了我一个网站,网站其它没有什么问题;也就是网站的新闻动态栏目里面发布的文章,图片一直不居中,一直都是居左对齐。我一听说,就觉得肯定是小问题,分分钟就可以搞定的。但是最后我搞了差不多一个小时。为什么呢?

        其实,在发布文章的时候,一般情况下,为让文章的样式好看,通常都会把穿插在其中的图片居中。所以在图片的外围外面都会用<div style="text-align:center;"></div>包起来。也就是说图片居中的样式是:<div style="text-align:center;"><img src="***"></div>应该就OK了。

        我看过了客户的代码,的确网站发布的文章基本上都是这样让图片居中的。但是问题是它就是不居中,这就奇了怪了。我试过在<div>里面放文字是能够居中的,但是图片就是不居中。于是我觉得可能是js控制了,所以我把所有的js都去掉了,但是还是不行;最后实在没办法,都想着去给<div>加一个宽度,在使用margin:0 auto来解决了。但是客户上的图片大小是不一的,所以这个也不现实。

        最后,只能对<div>、<img>这几个标签一个个的去检查;无意间发现在css里面有这面一串代码,整个人瞬间崩溃了。不知道是哪个天才写了:img{display: block;};也就是说他把所有的图片都给整成block块元素,宽度缺省是它的容器的100%,除非设定一个宽度。所以去掉就OK了。

        个人提醒,其实在做网站的时候,很多人都喜欢在div、img等上加上block块元素,这样很容易会出现致命的错误;所以非必要还是不要加的好。