以图明志

CSS

CSS让图片垂直居中的几种技巧

三种方法介绍
在网页设计过程中,有时候会希望图片垂直居中的情况。而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准浏览器外,另外两种方法的兼容性还不错。

CSS

使图片水平并垂直居中的一个Hack

淘宝的一个前端面试题
淘宝的一个前端面试题:使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。 想起了vertical-align:middle;但是不行,后来才知道还要display:table-cell;才可以,但是display:table-cell;这个在IE是没有用的,于是就想用line-height来解决,无果。

CSS

CSS实现垂直居中的一个技巧

又一个实用的居中技巧
水平居中我们知道最简便的方法就是margin:auto,但是margin只是相对宽度有效。如果垂直居中的元素高度已知,这个比较简单,也不需要额外的辅助元素。如果居中元素高度可变,这个需要额外的一个wrapper元素,用table-cell的方式来模拟表格的居中实现,当然,早期的ie又是另一招,具体可见代码。
1 / 1 首页 < Prev 1 Next > 尾页 页码: