我总是在div中寻找中间定位文本的替代方法,有很多方法,从
javascript动态定位到最新的css单元vw和vh.
前几天我意识到还有另外一种方式始终在我面前,但我从未使用它,即通过将div显示为表格单元格
display:table-cell; vertical-position:middle http://jsfiddle.net/manolis/TPKsf/
我还没有在生产中使用它,但我想知道使用这个解决方案的优缺点是什么.
前几天我意识到还有另外一种方式始终在我面前,但我从未使用它,即通过将div显示为表格单元格
display:table-cell; vertical-position:middle http://jsfiddle.net/manolis/TPKsf/
我还没有在生产中使用它,但我想知道使用这个解决方案的优缺点是什么.
谢谢!
解决方法
display:table-cell可能有一些你不想要的后果.通过快速搜索,我找到了一些相关信息:
> display:table-cell元素应该在display:table元素内(但是don’t necessarily need to be in a display:table-row
element).
> display:table-cell元素没有边距.
>表格不会像div那样自动占据整个宽度.
> QuirksMode docs on display:table
有一些有趣的信息,甚至还有一个“游乐场”,你可以轻松地改变元素的显示,看看它们是如何相互作用的.
我的看法:如果你在display:table元素中正确地形成它,并且你只需要表格格式正常的有限目的,那就去做吧(例如,将404错误垂直居中作为页面上的唯一框).