Zentrum Text auf Hintergrundbild

Question

Ich habe Probleme mit der Positionierung von Text auf der vertikalen und horizontalen Mitte meines Hintergrundbildes. Mein Hintergrundbild ist ein Abzeichen, das immer die gleiche Größe haben sollte, mein Text oben ist eine Zahl mit 1 oder 2 Ziffern. All das zusammen ist meine Überschrift.

HTML:

<h1> 
    <span class="playerlevel"> 
    <strong>12</strong> 
    </span> 
    player 
    <span class="playertag"> #tag</span> 
</h1> 

CSS

.playerlevel strong { 
    height: 28px; 
    width: 28px; 
    padding: 0; 
    margin: 0; 
    line-height: 28px; 
    font-size: 18px; 
    font-weight: normal; 
    text-align: center; 
    background-image: url(http://i.imgur.com/IuhiyzQ.png); 
    color: #fff; 
} 

.playertag { 
    font-size: 1rem; 
} 

Wie das Ergebnis sollte wie folgt aussehen:

Was meinen Code erstellt:

JSFiddle:

https://jsfiddle.net/nafhLz1w/

Answer 1

Verwenden Hintergrund-Größe als Abdeckung mit einer gewissen Polsterung

Schnipsel unten

.playerlevel strong { 
 
    height: 28px; 
 
    width: 28px; 
 
    padding: 0; 
 
    margin: 0; 
 
    line-height: 28px; 
 
    font-size: 18px; 
 
    font-weight: normal; 
 
    text-align: center; 
 
    background-image: url(http://i.imgur.com/IuhiyzQ.png); 
 
    background-size:cover; 
 
    padding:10px; 
 
    color: #fff; 
 
} 
 

 
.playertag { 
 
    font-size: 1rem; 
 
}

<h1> 
 
    <span class="playerlevel"> 
 
    <strong>12</strong> 
 
    </span> 
 
    player 
 
    <span class="playertag"> #tag</span> 
 
</h1>

Answer 2

Sie benötigen 2 Eigenschaften festlegen: background-size: cover; und eine Polsterung z.B. padding: 10px;

JsFiddle: https://jsfiddle.net/hwkkr877/

Answer 3

Fügen Sie einfach 'display: inline-block;' zu deinem CSS.

Answer 4

Ich glaube, Sie haben nur die oder display:inline-block Attribut fehlt.

hinzufügen es wird die Nummer angezeigt ordnungsgemäß auf dem Hintergrundbild machen: https://jsfiddle.net/nafhLz1w/1/

Nebenbei bemerkt: Ich jedoch nicht den Eindruck erwecken, obwohl alles dies in einem H1-Tag zu wickeln, dass kein guter Weg ist, das zu handhaben . Wickeln Sie es lieber in ein div-Element oder ein anderes Blockelement.

Answer 5

Dieses sicher funktioniert.

.playerlevel { 
display: inline-block; 
} 

.playerlevel strong { 
background-image: url("http://i.imgur.com/IuhiyzQ.png"); 
background-size: contain; 
color: #fff; 
display: inline-block; 
font-size: 14px; 
font-weight: normal; 
height: 28px; 
line-height: 28px; 
margin: 0; 
padding: 0; 
text-align: center; 
width: 28px; 
}