最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css中固定高度容器内的图片垂直水平居中的实例
时间：2014-01-23 编辑：简简单单 来源：一聚教程网
在某一个网站(freeappstools)上看到的这个“新奇”解法，说新奇，主要是国内各种总结的方法都没提到过，打引号，只是因为其中的原理很多人都知道：即依靠行高(line-height)的方法。
line-height对于img元素并不起作用：
| 代码如下 | 复制代码 |
line-height对于box内的文本起作用，图片跟随着文字的基线对准:
| 代码如下 | 复制代码 |
再设置img的vertical-align:middle;就可以让图片垂直居中:
| 代码如下 | 复制代码 |
所以就有人这样做了：(设置font-size:1px，设置字体颜色和背景颜色一致，设置左缩进-1px,图片就完美垂直水平居中了，注意img前面的".")
| 代码如下 | 复制代码 |
上述方法已通过IE7+,FF,Chrome测试~~
或者，如果你不需要兼容IE低版本，你可以直接用:after伪类来处理这个".",
div:after{content:"."}
相关文章
- Css未知高度图片垂直居中实例 10-17
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- CSS组合选择器解析 10-26