Question

我正在尝试在HTML / Javascript中实现以下功能：

有一个彩色圆圈，其中一段文字完全居中（水平和垂直）;
从JavaScript动态生成，能够改变圆圈的大小，始终将文本保持在其中心。

以下是第一个：

使用样式具有适当背景和border-radius;
在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进行测试，这可能是该网站目标受众中最常用的，但我也在寻找一种合理的跨浏览器兼容的解决方案。）

Answer 1

你可以用纯粹的css实现这个目标

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

#theText {
    vertical-align: middle;
}

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

Answer 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';
}

Answer 3

使用弹性盒可以轻松实现这一点。

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: