Zentrieren von Text mit Wortabstand und Hintergrundbild

Question

Ich versuche, einen Text innerhalb div mit Wortabstand und Bild im Hintergrund eingegeben werden. Ein Beispiel dafür, was ich versuche zu erreichen:

Her ist eine Geige, die zeigt, was ich bisher erreicht:

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/

Sie müssten die Wörter in etwas wie wie verpacken schwenken, damit Sie sie zentrieren können. Dies geschieht mit CSS, da Sie dies mit dem CSS-Tag versehen haben, aber Sie können dies auch mit jQuery erreichen.

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

Anstatt etwas Zentrieren, es scheint, wie Sie das Bild in regelmäßigen Abständen zwischen den Wörtern wollen. Ich stimme w/Blaine zu, dass die Wörter in eine Spanne verpackt werden müssen. Ich stimme jedoch nicht mit einer festen Breite überein, da dies sehr einschränkend ist.

Stattdessen würde ich das Hintergrundbild aus dem h2 bewegen und legen Sie es auf einem Pseudoelement einer der Spannweiten:

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

Mit Inline-Block-Orte alles richtig nebeneinander und setzen Eine Schriftgröße: 0 auf dem h2 löscht alle Leerzeichen.

Jetzt können die Wörter beliebig lang sein, und das Bild bleibt perfekt zwischen ihnen.

Hier ist eine Demo: https://jsfiddle.net/rq8u5b3k/1/

Wenn Sie nicht das Markup für welchen Gründen auch immer kontrollieren kann, hier ist ein jQuery-Schnipsel, die jedes Wort in einer Spanne wickeln wird:

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

aktualisiert Demo: https://jsfiddle.net/rq8u5b3k/3/