css - 以字间距和背景图像居中文本

Question

我正在尝试让 div 中的文本以字间距和背景图像输入。 我正在努力实现的一个例子:

她的 fiddle 展示了我到目前为止所取得的成就:

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;
}