最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Css未知高度图片垂直居中实例
时间：2013-10-17 编辑：简简单单 来源：一聚教程网
方法一：
该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。
HTML结构部分：
| 代码如下 | 复制代码 |
CSS样式部分：
| 代码如下 | 复制代码 |
方法二：
标准浏览器还是将外部容器#box的显示模式设置为display:table-cell，IE6/IE7是利用在img标签的前面插入一对空标签的办法。
HTML结构部分：
| 代码如下 | 复制代码 |
|
|
|
方法三：
该方法针对IE6/IE7，将图片外部容器的字体大小设置成高度的0.873倍就可以实现居中，标准浏览器还是使用上面的方法来实现兼容，并且结构也是比较优雅。
HTML结构部分：
| 代码如下 | 复制代码 |
|
|
|
CSS样式部分：
| 代码如下 | 复制代码 |
|
#box { |
|
相关文章
- css中固定高度容器内的图片垂直水平居中的实例 01-23
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- CSS组合选择器解析 10-26