1

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

这是我到目前为止所拥有的：http: //jsfiddle.net/nareshbhatia/h2s4h/

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

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

4

1 回答 1

0

当您只有一行时，行高方法使文本居中。您使用的是百分比，所以我认为这个问题在这方面可能会有所帮助。

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

  • 测量段落（或您使用的任何元素）的外部高度.content

  • 计算offset该段落的底部与.content（从段落的底部边框到 .content div 的底部边框剩余多少空间）

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

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

如果您想要一个纯 css 解决方案，请检查这些垂直居中的替代方法。

于 2013-05-30T04:49:30.347 回答