使特定字符（或类/ ID）成为字符串的中心点

Question

我想在中心对齐一些文字，但不仅仅是做text-align: center。

我想将一个特定的字符/类/ ID作为中心，而字符串的其余部分会被附加并很好地预先添加。这就是我的意思：

https://jsfiddle.net/6w5Lb6ta/

正如您所看到的，中间的红色c在中间稍微对齐（我使用margin-right来制作这个小例子）。我想说的是：

  

对齐中间的所有文本，但将字符串的“锚点”设为特定字符/类/ ID

这样的事情可行吗？

Answer 1

这可以通过一些jQuery来完成：

var width = $('#text').width()/2;
var width2 = $('#center').width()/2;
var left = $('#center').offset().left;
$('#text').css('margin-right', (left-width+width2)*2);

https://jsfiddle.net/6w5Lb6ta/7/

Answer 2

一些CSS黑客怎么样？ ;)

我使用了:before和:after伪元素，您可以使用标准元素替换它们以使文本可选。

div {
  font-size: 2em;
  display: table;
  color: #f00;
  white-space: nowrap;
}

div:before, div:after {
  display: table-cell;
  width: 50%;
  color: initial;
}

div:before {
  content: attr(data-before);
  text-align: right;
}

div:after {
  content: attr(data-after);
}

<div data-before="Here is some text. Align&nbsp;" data-after="enter on the red c">c</div>

JSFiddle： https://jsfiddle.net/6w5Lb6ta/8/