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

Question

我试图在HTML/Javascript中实现以下内容:

• 有一个彩色圆圈，圆圈内有一段文字完全居中(水平和垂直);
• 从JavaScript动态地，能够改变圆圈的大小，保持文本中心在它的任何时候。

下面实现了第一个:

• 使用DIV元素创建圆圈，其样式具有合适的背景和border-radius;
• 在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

你可以用纯css实现

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

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

Answer 2

使用flex box就容易多了。

div {
  background-color: #ccc;
  height: 50px;
  width: 100%;
  /* Important Part */
  display: flex;
  justify-content: center;
  align-items: center;
}

<div>
  <span>Center Me Please</span>
</div>

Answer 3

下面是一个例子。我使用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';
}