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

【问题标题】：Dynamically setting line-height/keeping text vertically centered when parent div changes size in JavaScript当父div在JavaScript中更改大小时动态设置行高/保持文本垂直居中
【发布时间】：2013-04-10 16:41:13
【问题描述】：

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

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

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

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

例如：

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 中进行测试，这可能是该网站的目标受众最常用的，但我也在寻找一种合理地跨浏览器兼容的解决方案。）

【问题讨论】：

这是一种对我有用的方法：jsfiddle.net/HKByH 但你没有用 jquery 标记这个问题，所以我很犹豫是否将它作为答案提交。
在那里，我将 jQuery 从调整大小中取出（将其保留在滑块中，以便您可以看到它工作）

标签： javascript css

【解决方案1】：

你可以用纯 css 实现这一点

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

#theText {
    vertical-align: middle;
}

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

【讨论】：

谢谢 - 这行得通，只是它对周围组件的布局有连锁反应，这可能意味着我无法使用它。
我不明白你的意思，#theCircleDiv 可能因为display: table-cell 而不在布局中，请尝试在另一个 div 中使用浮动、位置或您用于布局的任何内容将其包围
是的，你是对的——这实际上只是一个实际问题，即我是否有时间在可用的期限内更改周围的代码。我认为您提出的解决方案原则上是可行的。

【解决方案2】：

这是example。我正在使用 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';
}

【讨论】：

你用的是什么浏览器？这正是对我不起作用的建议选项之一，在 Safari 中进行测试。
抱歉，忽略最后一条评论——刚刚重新测试过，它似乎可以工作。似乎有一个小问题，文本没有水平保持在完全相同的位置，但它基本上可以工作，谢谢。
你是说圆本身应该在更大的空间内居中？
是的，基本上我想要达到的效果是让圆圈在大小上“振荡”，文本和圆圈的中心保持相同。我拥有的代码——更改边距以补偿大小的变化——连同你的 lineHeight 修改，基本上实现了这一点，只是——至少在 Safari 中——文本不会保持在完全相同的位置，我猜是因为计算位置的舍入误差。我想在最坏的情况下我可以通过使用图像而不是实际文本来解决这个问题。
这是一个尝试这样做的修改版本：jsfiddle.net/HKByH/3 不过它还没有在广泛的浏览器上进行测试，所以你必须决定它是否适合你

【解决方案3】：

使用 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>

【讨论】：