Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

最给力的垂直居中 table-cell

  “垂直居中用表格”这已经是一句口诀了,因为表格的垂直居中特别给力。单元格元素的vertical-align:middle可以作用到其内容的含纳块上,而普通元素只能作用在自己身上。实际上如果不考虑IE6/7的话,都不需要表格,只要display:table-cell即可实现。
  其实这已经是很古老的技术了,只是我最近才开始抛弃IE7,所以刚开始用于正式项目中。这个用法很简单: <style>
#panel {
  border:1px solid #CCC;
  width:200px;height:200px;
  display:table-cell;
  vertical-align:middle;
}
#panel>* {background:red;}
</style>
<div id="panel">
  <div>block</div>
  <span>inline</span>
  <span>inline</span>
  <div>block</div>
  <span>inline</span>
</div>

  垂直居中是妥妥地实现了!但原理呢?在CSS2.1中的#17.5.3 Table height algorithms可以找到相关的定义。table-cell上的vertical-align是有额外效果的。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^