居住与文本间距和背景图象的文本

Question

我正在尝试在div中输入文字，在后台输入文字间距和图像。 我正在努力实现的一个例子：

她是一个小提琴，展示了我迄今取得的成就：

div {
  width: 200px;
}
h2 {
  display: inline-block;
  text-align: center;
  color: #000000;
  word-spacing: 40px;
  background: url("http://s33.postimg.org/twxfn1by7/Playlist_Triangle.png") top center no-repeat;
  background-size:50px;
  padding: 20px 0;
}

<div>
<h2>
Some text
</h2>
</div>

Answer 1

https://jsfiddle.net/wes2sa1t/

你必须将这些单词包装成一个跨度，这样你就可以将它们放在中心位置。这是用CSS做的，当你用CSS标签标记它时，你也可以用jQuery实现这一点。

<强> HTML：

<div>
<h2>
<span>Some</span> <span>text</span>
</h2>
</div>

<强> CSS：

h2 {
  display: inline-block;
  text-align: center;
  color: #000000;
  word-spacing: 40px;
  background: url("http://s33.postimg.org/twxfn1by7/Playlist_Triangle.png") top center no-repeat;
  background-size: 50px;
  padding: 20px 0;
}
span {
  width: 100px;
  display: inline-block;
  text-align: right;
}
span:nth-child(2) {
  text-align: left;
}

Answer 2

似乎您希望图像在单词之间均匀分布，而不是使某些内容居中。我同意布莱恩的话，这些话需要包含在一个范围内。我不同意设置一个固定的宽度，因为这是非常有限的。

相反，我会从h2移动背景图像并将其放在其中一个跨度的伪元素上：

h2 {
  display: inline-block;
  text-align: center;
  color: #000000;
  padding: 20px 0;
  font-size: 0; // gets rid of whitespace between the spans
}

span {
  font-size: 24px; // resets the font-size of the words
}

span:nth-child(1):after {
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  background: url("http://s33.postimg.org/twxfn1by7/Playlist_Triangle.png") top center no-repeat;
  background-size: 50px;
}

使用inline-block将所有内容放在一起，并在h2上放置一个font-size：0可以删除任何空格。

现在这些单词可以是任意长度，并且图像在它们之间保持完美的间隔。

以下是演示：https://jsfiddle.net/rq8u5b3k/1/

如果由于某种原因你无法控制标记，这里有一个jQuery片段，它将包裹每个单词：

var words = $("h2").text().split(" ");
$("h2").empty();
$.each(words, function(i, v) {
    $("h2").append($("<span>").text(v));
});

更新了演示：https://jsfiddle.net/rq8u5b3k/3/