当父 div 在 JavaScript 中更改大小时动态设置行高/保持文本垂直居中

Question

我试图在 HTML/Javascript 中实现以下目标：

• 有一个彩色圆圈，其中有一段文本完全居中（水平和垂直）；
• 通过 JavaScript 动态地改变圆圈的大小，始终保持文本居中。

以下实现了其中第一个：

• 使用 DIV 元素创建圆形，其样式具有适当的背景和边框半径；
• 在 DIV 内，放置一个样式为“text-align: center”和“line-height:”的 P 元素。

例如：

p.circlecaption {
  text-align: center;
  line-height: 128px;
}
...
<div style="background: #a0a0a0; margin: 0px; width: 128px;
   height: 128px; border-radius: 64px;" id="theCircleDiv">
     <p class="circlecaption" id="theText">TEST!</p>
</div>

这对于初始、静态的情况效果很好。当我尝试从 JavaScript 设置 line-height 属性以便在更改 div 大小时保持文本垂直居中时，问题就出现了。我期望像下面这样的东西能够工作：

var obj = document.getElementById('theCircleDiv');
var sz = '' + (rad*2) + 'px';
obj.style.width = sz;
obj.style.height = sz;
obj.style.margin = '' + (64 - rad) + 'px';
obj = document.getElementById('theText');
obj.style['line-height'] = sz;

然而，虽然此代码完美地重新调整了圆的大小并重新居中，但它并没有垂直地重新使文本居中——即动态设置行高的尝试似乎被忽略了。

任何人都可以提供有关如何动态设置行高的任何帮助，或者提供一种方法来实现我将文本保持在圆圈中心的预期目标吗？从我的阅读中，我看到了各种其他建议，例如将属性称为“lineHeight”或使用“vertical-align: middle”，但似乎都不起作用。

（我目前正在 Mac OS 上的 Safari 中进行测试，这可能是该网站的目标受众中最常用的，但我也在寻找一种合理的跨浏览器兼容的解决方案。）

Answer 1

这是一个例子。我正在使用 jQuery UI 连接一些动态的尺寸设置，但调整尺寸代码应该在纯 JavaScript 环境中工作。

首先，我清理了 HTML 并将其样式放入 CSS 中

HTML：

<div id="theCircleDiv">
    <p class="circlecaption" id="theText">TEST!</p>
</div>

CSS：

#theText {
    text-align: center;
    line-height: 128px;
}
#theCircleDiv {
    background: #a0a0a0;
    margin: 0px;
    width: 128px;
    height: 128px;
    border-radius: 64px;
}

JavaScript：

function resize(size) {
    var circle = document.getElementById('theCircleDiv'),
        text = document.getElementById('theText');
    circle.style.width = size + 'px';
    circle.style.height = size + 'px';
    circle.style.borderRadius = (size / 2) + 'px';

    text.style.lineHeight = size + 'px';
}