图片垂直居中 - 段正淳的css笔记(5)
一天大家在团队中讨论“未知图片垂直居中”的问题，突发奇想用vertical-align:middle这个属性来实现，于是抽了时间做了下面这个不成熟的例子：
CSS:
div{
width:140px;
height:140px;
text-indent:-8px;
text-align:center;
line-height:138px;
background:red;
font-size:12px;
*font-size:120px;
*text-indent:-60px;
}
img{
width:100px;
height:100px;
vertical-align:middle;
}
初衷是不想用position来做,毕竟 大量的图片显示浏览器在渲染的时候会消耗 较多的资源。
缺点是 输出了 无意义的nbsp;, 而且font-size和font-indentd的计算公式不是很简单(所以以上的数字都是凑的^_^).
后来小马见了这个思路，用了点时间升级了代码,用:after输出代替了无趣nbsp ,代码见下：
CSS:
.tb-p-c{
display: block;
width:140px;
height:140px;
line-height:140px;
text-align:center;
*font-size:123px;
}
.tb-p-c img{
vertical-align:middle;
}
.tb-p-c:after {
content: ".";
visibility: hidden;
font-size: 12px;
margin-left: -5px;
}
这样子，恼人的nbsp消失了。大家对vertical-align:middle的渲染方式有了更进一步的了解了。还让很多同志发现了after这个伪类还可以用来hack.
结果圆心又给CSS升了次级：
CSS:
.tb-p-c{
display: table-cell;
vertical-align:middle;
width:140px;
height:140px;
text-align:center;
*display: block;
*font-size: 122px;
background:red;
}
.tb-p-c img {
vertical-align:middle;
}
这是第三次的升级，由于时间关系，没有测试上面的代码，原因是利用了display来渲染，感觉上还是会让浏览器多次渲染，所以偶没测试-_- 。
这次探讨给了我们很多很多的收获，相信如果有大家的参与，会有更多方式和我们没发现的观点。大伙别小气，多发表回复，一起提高。
相关文章：
- css代码的简写 - 段正淳的css笔记(4) - 2008年01月10日 13:01
- css属性顺序书写规范 - 段正淳的css笔记(3) - 2008年01月10日 12:01
- 圆角的做法 - 段正淳的css笔记(2) - 2008年01月10日 11:01
- 类目之间的横竖线 - 段正淳的css笔记(1) - 2008年01月10日 10:01
- 表单在各个浏览器下的表现统一-段正淳的css笔记(7) - 2008年11月11日 23:26
- 浅谈css框架开发-段正淳的css笔记(6) - 2008年11月11日 23:25
- 给不同 type 的 input 自动设置样式 - 2008年11月17日 16:56
- 浅谈css框架开发 - 段正淳的css笔记(6) - 2008年01月10日 15:01
- MySQL 大企业级应用可行性分析(之四) - 2009年09月14日 12:56
- MySQL 大企业级应用可行性分析(之三) - 2009年09月14日 12:54
