对于许多前端来说,让图片居中有很多办法,但是最简单,最便捷的有哪些方法呢?
padding? margin?对于单个图片来说确实可以使用,不过注意不要触发margin-top,padding还要做减法,更重要的是,你一旦使用了这个方法不同的图片你每次都要修改相关数据,何其麻烦!所以,让图片居中并不是简单的margin和padding就能解决的!
当然一个解决不了,两个也解决不了!
1.单个图片居中
这个方法只能只能试用于解决单个图片居中的问题,为什么呢?多了就不好使了呗!
代码如下图所见!
Q:为啥不放在git hub上?
A:不为啥,就不想放,有本事来打我呀~~~~~
2.说完了一个图片的居中方式,我们说说多个图片的居中方式,目前我就会两种,也是比较low的方法了。
简单来说就是给图片前面加一个i标签,运用vertical-align方法实现
为啥是i,div可以不?可以!
不过不管哪种,你都要把他定义成行内元素,为什么?w3cschool上是怎么说的:
vertical-align:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
我是地址:http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp
RT,当我们想使用这个属性的时候,一定要记得是行内元素。是行内元素之后,想怎么玩就怎么玩~~
好了,代码如下:记住一定要定义i标签的高度,而且高度必须是和父级一样的,这样才能居中。
3.这个方法是很久之前就有了,不过他在IE下会有兼容问题,大家可以自己测试下。
除此之外其实还有一种方法可以让图片居中,那就是display:flex,margin:o auto;不过这个方法鞥以后再和大家细说吧,有兴趣的可以自己去查一下flex的相关布局。