惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

WordPress大学
WordPress大学
Engineering at Meta
Engineering at Meta
D
DataBreaches.Net
月光博客
月光博客
Recent Announcements
Recent Announcements
Google DeepMind News
Google DeepMind News
U
Unit 42
腾讯CDC
爱范儿
爱范儿
J
Java Code Geeks
有赞技术团队
有赞技术团队
Blog — PlanetScale
Blog — PlanetScale
N
Netflix TechBlog - Medium
B
Blog
Stack Overflow Blog
Stack Overflow Blog
GbyAI
GbyAI
T
The Blog of Author Tim Ferriss
小众软件
小众软件
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Y
Y Combinator Blog
大猫的无限游戏
大猫的无限游戏
Microsoft Azure Blog
Microsoft Azure Blog
T
Tailwind CSS Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知

博客园 - 一抹微蓝

git revert 和 git reset的区别 [JavaScript]Call和Apply方法 jQuery性能规则 把excel数据生成SQL语句 - 一抹微蓝 - 博客园 CSS长度单位及区别 em ex px pt in 一个在IE5.5,IE6,IE7,IE8都存在的BUG 同时登录多个MSN Visual Studio 2008 Service Pack 1 安装体验 VS2008常用快捷键 遍历JavaScript对象的所有属性 2、8、10、16进制的转换 推荐的 CSS 书写顺序 页面中 CSS 加载方式的优化 link 和 style 元素在 HTML 文档中的位置 Visual Studio 常用快捷键 div+css实现Firefox和IE6兼容的垂直居中 FireFox与IE开发上的一些区别 CSS兼容IE/Firefox要点 IE FireFox对CSS的不同解释收集
图片垂直居中的使用技巧
一抹微蓝 · 2008-07-04 · via 博客园 - 一抹微蓝

难点在于两点:

  1. 垂直居中;
  2. 图片是个置换元素,有些特殊的特性。

下面是一个权衡的相对结构干净,CSS简单的解决方法:

.box {
    
/*非IE的主流浏览器识别的垂直居中的方法*/
    display
: table-cell;
    vertical-align
:middle;/*设置水平居中*/
    text-align
:center;/* 针对IE的Hack */
    *display
: block;
    *font-size
: 175px;/*约为高度的0.873,200*0.873 约为175*/
    *font-family
:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/

    width

:200px;
    height
:200px;
    border
: 1px solid #eee;
}
.box img 
{
    
/*设置图片垂直居中*/
    vertical-align
:middle;
}

<div class="box">
    <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>