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

Question

我正在尝试在 HTML/Javascript 中实现以下目标:

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

以下实现了其中的第一个:

• 使用样式具有适当背景和边框半径的 DIV 元素创建圆；
• 在DIV中，放置一个样式为“text-aligbn: 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

你可以用纯css来实现

#theCircleDiv {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#theText {
    vertical-align: middle;
}

工作示例:http://jsfiddle.net/bZj52/