javascript - text-align: centered div の左の境界線とテキストの開始の間のスペースをカウントするにはどうすればよいですか?

Question

<div style='text-align: center; width: 300px'>test me</div>

左側からdivの文字列の最初の文字までのmargin-left pxが必要ですか？

Answer 1

文字とそのコンテナーの間の距離をカウントする唯一の方法は、テキストの前にインライン要素を追加してから、プレースホルダーから親の左オフセットを減算することです (を使用.offset())。

例 (デモ: http://jsfiddle.net/LM8xL/ )

HTML:

<div id="some-div" style='text-align: center; width: 300px'>test me</div>

JavaScript:

var $elem = $("#some-div"),     // Select element
    $placeholder = $("<span>"); // Create inline placeholder
$elem.prepend($placeholder);    // Add placeholder before its contents

// Calculate distance
var distance = $placeholder.offset().left - $elem.offset().left;
$placeholder.remove();          // Remove placeholder
alert(distance);                // Example: Display result

Answer 2

テキストを別の要素 ( ) でラップして、それをあなたのspanものと比較してみてはいかがでしょうか?.offsetLeftdiv

Answer 3

カラシニコフが言ったように、テキストをスパンタグで囲む必要がありますが、いくつかの追加作業を行う必要があります。答えを得るには、スパン位置と親 (div) オフセットを取得し、それらを減算する必要があります。コードは次のとおりです。

var position = $("span").position();
var parentOffset = $("span").parent().offset();
var left = position.left - parentOffset.left;