6

HTML/Javascriptで次のことを達成しようとしています:

  • その中に（水平方向と垂直方向の両方で）完全に中央にテキストが配置された色付きの円があります。
  • JavaScript から動的に円のサイズを変更し、テキストを常に中央に配置することができます。

以下は、これらの最初のものを実現します。

  • スタイルが適切な background と border-radius を持つ 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 から、div のサイズを変更するときにテキストを垂直方向に中央揃えにするために line-height プロパティを設定しようとしたときです。次のようなものが機能することを期待していました。

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;

ただし、このコードは円のサイズと中心を完全に再設定しますが、テキストの垂直方向の中心を再設定しません。つまり、行の高さを動的に設定しようとしても無視されるようです。

line-height を動的に設定する方法、またはテキストを円の中心に保つという私の目的を達成する方法について、誰か助けてもらえますか? 私の周りの読書から、プロパティ「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 に答える