Jun 7, 2011

css vertical centering 方法以及 vertical-align 是什么

在很多情况下,我们需要把某些元素放置在containing block的竖直中央,vertical-align 并不能完成任务,除非该 containing block 是一个 table cell.

vertical-align 是指该元素在行内(而非 containing block)的 vertical align
请阅读
What is Vertical Align?

关于如何
请阅读进行 vertical centering,请阅读
Vertical Centering with CSS
文中代码有错,代码请在这儿下载

这儿做些总结
要进行 vertical centering
首先必须知道 containing block 的高度;
其他分三种情况

  1. element 高度未知,对应方法 1
  2. element 高度已知,对应方法 2,3,4
  3. element 是一行文本,对应方法 5

注意文中给出了5种方法,有些不一定兼容所有浏览器

0 comments: