css – 在div中垂直定位文本的方式怎么样?

前端之家收集整理的这篇文章主要介绍了css – 在div中垂直定位文本的方式怎么样?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我总是在div中寻找中间定位文本的替代方法,有很多方法,从 javascript动态定位到最新的css单元vw和vh.
前几天我意识到还有另外一种方式始终在我面前,但我从未使用它,即通过将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错误垂直居中作为页面上的唯一框).

原文链接:/css/214933.html

猜你在找的CSS相关文章