您现在的位置是:首页 >动态 > 2024-01-08 01:36:29 来源:

css图片居中不了(css图片居中)

导读 大家好,我是小夏,我来为大家解答以上问题。css图片居中不了,css图片居中很多人还不知道,现在让我们一起来看看吧!1、LZ元旦快乐啊........

大家好,我是小夏,我来为大家解答以上问题。css图片居中不了,css图片居中很多人还不知道,现在让我们一起来看看吧!

1、LZ元旦快乐啊.....

2、LZ真有心,在元旦居然问如此复杂的问题。不过LZ问到了,我就说一种我个人用的方法。

3、水平居中很简单,垂直居中就很困难,网上方法很多,不过都存在这样那样的兼容性问题,要么就要引入一些其他元素。考虑到后期图片自动缩放,外容器浮动等等因素,然后只利用代码,不引入其他元素。于是我在网上思路的基础上,自己写了下面的方法。

4、CSS部分:

5、*{padding:0px;margin:0px;}

6、.conn{width:500px;height:500px;border:1px solid #000;text-align:center;}/*好懂吧,宽高定义,文本居中。*/

7、.imgmid{display:inline-block;*display:inline;*zoom:1;height:100%;width:1px;margin-left:-1px;vertical-align:middle}/*这个LZ自己研究研究,我定义了一个高100%的块元素用来对齐img*/

8、.conn img{width:400px;height:400px;vertical-align:middle;}/*好懂吧,img元素宽高,然后垂直居中对齐。*/

9、html部分:

10、<div class="conn"><img src="2301idjiofsnlkwjie.jpg_min.jpg"><span class="imgmid"></span></div>

本文到此讲解完毕了,希望对大家有帮助。