如何在流体布局中垂直缩放和居中文字？(使用CSS)
如何在流体布局中垂直缩放和居中文字？(使用CSS)
提问于 2013-05-30 04:04:35
我有一个由标题和内容区域组成的流体布局。标题将占用窗口高度的10%，而内容区域将占用其余的90%。整个屏幕上的文本应该与窗口的高度成比例地缩放。此外，标题中的文本应垂直居中。除了最后一项外，我能满足所有这些要求。有人知道怎么做吗？
到目前为止，我的情况如下：http://jsfiddle.net/nareshbhatia/h2s4h/
我正在使用Em单位做相对大小的文本。每当调整窗口大小时，我就使用JavaScript来更改body元素的字体大小。这种方法可以很好地缩放整个窗口的字体。最后，通过将标题的行高设置为与其高度相同(即10%)，使标题文本垂直居中。这通常是将文本垂直居中(当高度以像素为单位定义时)，但在这种情况下，文本不垂直地居中。有什么办法解决这个问题吗？
编辑 jsFiddle被更新以显示建议的答案。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-05-30 04:49:30
当您只有一行时，行高方法以文本为中心.你用的是百分比，所以我认为是这个问题在这方面可能会有所帮助。。
相反，您可以使用更多的jQuery或JS来加载：
- 测量
.content中段落的外部高度(或您使用的任何元素) - 计算该段的底部
offset与.content(从段落的底部边框到.content div的底部边框还有多少空间) - 将其余部分除以二，并将该数字添加为段落的顶部
margin或topposition。
这将使您有更长的文本，而不干扰线的高度。
如果您想要一个纯css解决方案，请检查这些垂直对中的替代方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16827739
复制相关文章
相似问题
腾讯云开发者
