6

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

4

3 回答 3

4

你可以用纯CSS来实现

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

#theText {
    vertical-align: middle;
}

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

于 2013-04-10T16:48:43.633 回答
2

这是一个例子。我正在使用 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';
}
于 2013-04-10T16:56:41.760 回答
1

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

于 2017-04-17T10:13:11.360 回答