最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css实现图片垂直居中方法
时间:2022-06-25 11:23:07 编辑:袖梨 来源:一聚教程网
CSS图片垂直居中问题,困扰了我许久,今天终于可以总结下来了。
方法一:利用定位
HTML结构如:
代码如下 | 复制代码 |
ps/i1/T1LeeNXodaXXXXXXXX-130-150.png" class="js-smartPhoto-pc" target="_blank"> |
CSS代码如:
代码如下 | 复制代码 |
body { |
方法二:
HTML结构同上;
CSS代码如:
代码如下 | 复制代码 |
.box { |
【注意,当在cssdiv/css.html target=_blank >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中有默认高度的空文本节点*/ } |
相关文章
- 第五人格佣兵护腕怎么用 第五人格佣兵护腕教学 04-28
- 崩铁星穹列车年度开拓报告活动怎么玩 星穹列车年度开拓报告网页活动介绍 04-28
- 逆水寒手游五子棋残局三十二怎么过 04-28
- 崩坏星穹铁道齐颂给谁用 04-28
- 火影忍者手游旋涡鸣人仙人模式怎么玩 04-28
- 原神怎么破坏磐键 原神破坏磐键的方法 04-28