最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css实现图片垂直居中方法
时间:2012-01-25 编辑:简简单单 来源:一聚教程网
CSS图片垂直居中问题,困扰了我许久,今天终于可以总结下来了。
方法一:利用定位
HTML结构如:
代码如下 | 复制代码 |
CSS代码如:
代码如下 | 复制代码 |
body { |
方法二:
HTML结构同上;
CSS代码如:
代码如下 | 复制代码 |
.box { |
【注意,当在css中设置了body元素字体的话,那么方法二在ie7下会失效的】
最佳方法:
CSS代码如:
代码如下 | 复制代码 |
body { margin: 0; padding: 0; font: 12px/1.5 tahoma,arial; } .box { width: 220px; height: 220px; border: 1px solid #F30; margin: 100px auto 0; } .pic-wrap { display: table-cell; vertical-align: middle; width: 220px; height: 220px; text-align: center; /*ie6、7不支持display:table-cell*/ *display: block; _font-size: 192px; +line-height: 220px; /*设置ie7中空文本节点行高为220px*/ _font-family: sans-serif; } .pic-wrap img { border: none; vertical-align: middle9; /*由于ie中有默认高度的空文本节点*/ } |
-
上一个: 纯css实现精美箭头代码
相关文章
- css position图片垂直居中的例子 07-08
- css实现body背景图片水平垂直居中方法 06-28
- css实现在div水平垂直居中与图片水平居中的效果 05-20
- css 让div中图片垂直居中办法 10-09
- 三款css div 图片垂直居中代码 10-17
- css控制 图片垂直居中 06-23