javascript - 垂直对齐文本，而它应该填充移动设备上的 div

Question

我试图强制文本填充一个 div，而 div 的高度和宽度未知。文本大小应该灵活，具体取决于父级。我想存档这样的东西:

该页面仅限移动设备，因此我需要支持所有 android/iphone 浏览器。主要问题是每个移动浏览器支持不同的东西，而且很难让这些东西在大多数*设备上工作。

我尝试设置 meta viewport width="640" - 它在最新的主流浏览器上运行良好，但所有较低版本的浏览器都有自己的实现并且它正在中断。

我想到的下一件事是使用视口(viewport)单位，但它们的支持也很糟糕 (http://caniuse.com/viewport-units)

我想出了以下字体大小代码:

var ratio = parent.offsetWidth * 85/100 / text.offsetWidth - 0.3;

text.style.fontSize = (10 * ratio > 85 ? 85 : 10 * ratio) + "px";

但它仍然不是那么精确，向量居中仍然是一个谜。

Answer 1

也许动态设置字体大小是实现此目的的正确方法。但是，您可以考虑使用 height 作为比率，而不是 width。所以计算 div 的高度可能是不可避免的。

对于垂直对齐，有以下几种解决方案:

1. 在一个范围内换行文本。并将 span 的 display 设置为 inline-block。向 span 添加一个 height 为 100% 的伪元素。将 vertical-align: middle 设置为 span 和伪元素，如 here 所述.确保设置父 div 的高度，必要时使用 Javascript。

2. 将 line-height 设置为与 div 的高度相同。

3. 设置parent div和children span的height，以及display: block; margin :自动