如何计算文本对齐中左边框和文本开头之间的空间：居中 div？答案

【问题标题】：How I can count the space between left border and begin of a text in the text-align: centered div?如何计算文本对齐中左边框和文本开头之间的空间：居中 div？
【发布时间】：2011-12-24 22:08:35
【问题描述】：

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

所以我需要从左侧到 div 中字符串的第一个字母的 margin-left px？

【问题讨论】：

您到底为什么需要这样做？你想做什么？

标签： javascript jquery text-align

【解决方案1】：

计算字符与其容器之间距离的唯一方法是在文本前添加一个内联元素，然后从占位符中减去父元素的左偏移量（使用.offset()）。

示例（DEMO：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

【讨论】：

这似乎在 Chrome 中不起作用。我的猜测是 span 需要 inline-block jsfiddle.net/juandopazo/Nnt3u
@juandopazo 感谢您的贡献。我很感激。

【解决方案2】：

也许用另一个元素 (span) 包装您的文本，然后将它的 .offsetLeft 与您的 div 进行比较？

【讨论】：

【解决方案3】：

正如卡拉什尼科夫所说，您需要将文本包装在跨度标签中，但需要做一些额外的工作。您需要获取跨度位置和父（div）偏移量并减去它们以获得答案。代码如下：

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

【讨论】：