display:table 和 display:table-cell 需要一起用吗?急急急在线等~

未来造梦师
  • 792

display:table 和 display:table-cell 需要一起用吗?

我怎么感觉在div里直接使用display:table-cell 也可以满足垂直居中

回复
阅读 3.7k
2 个回答
Humphry
  • 16.4k
✓ 已被采纳

不必要。

如果你不给display: table-cell的父亲或祖先节点设置display: table,浏览器会创建匿名的table-row框和table块框/table内联框出来。

应用css table布局的时候也分情况。
如果你需要对display: table-cell设置百分比高度/宽度时,就需要组合使用display:table

可以看一下这fiddle,比较一下test #1和#2:

http://jsfiddle.net/ocja4y0e/1/

原理解释:
涉及到百分比,我们就必须看包含块。常规流的 table-cell 的包含块是它的祖先节点上的 table 元素。如果祖先节点上面没有 table 元素,浏览器会构建一个 anonymous table box。(这段解释模糊了比较多的细节,建议阅读包含块等spec后详细理解)
因而你需要设置它的祖先节点的 table 的高度,以对 table-cell 使用百分比的高度。


w3c CSS2.1的相关spec在此

anonymous table box

Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element.

不一定一起使用,但是有时候外层div需要使用display:table 内层使用display:table-cell这样才能有table的效果,尤其是内层有多个兄弟节点或者多行的时候。具体的你可以在不同浏览器中试试看。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏