css - 如何在流体布局中垂直缩放和居中文本？ (使用 CSS)

Question

我有一个由标题和内容区域组成的流畅布局。标题将占据窗口高度的 10%，而内容区域预计将占据剩余的 90%。整个屏幕中的文本应与窗口的高度成比例。标题中的文本也应垂直居中。除了最后一项，我能够满足所有这些要求。有人知道怎么做吗？

这是我目前拥有的:http://jsfiddle.net/nareshbhatia/h2s4h/

我正在使用 Em 单位来调整文本的相对大小。每当调整窗口大小时，我都使用 JavaScript 更改 body 元素的字体大小。这种方法可以为整个窗口漂亮地缩放字体。最后，我尝试通过将标题的行高设置为与其高度相同(即 10%)来使标题文本垂直居中。这通常使文本垂直居中(当高度以像素为单位定义时)，但在这种情况下，文本不会垂直居中。关于如何解决此问题的任何想法？

编辑 jsFiddle 已更新以显示建议的答案。

Answer 1

当只有一行时，行高方法使文本居中。您使用的是百分比，所以我认为 this question might help in that respect .

您可以做的是在加载时使用更多的 jQuery 或 JS:

• 在 .content

中测量段落(或您使用的任何元素)的外部高度

• 计算此段落相对于 .content 的底部 偏移量(从段落底部边框到底部还有多少空间.content div 的边框)

• 将余数一分为二，并将该数字添加为段落的顶部 margin 或顶部 position。

这将使您拥有更长的文本而不会弄乱行高。

如果您想要纯 css 解决方案，请查看这些 alternative ways of centering vertically .