Text im Bild dynamisch zentrieren

Question

Ich habe ein Container-Div, bei dem Höhe und Breite auf 100% gesetzt sind und die Position relativ ist. Innerhalb des div zentriere ich ein Bild (Bild ist kleiner als div) mit display: block und margin: auto. Dann versuche ich Text innerhalb des Bildes mit der Position zu zentrieren: absolut, links: 45%, oben 82 Pixel. Die vertikale Ausrichtung scheint in Ordnung zu sein, aber wenn die Anzahl der Zeichen im Text zunimmt, ist der Text nicht mehr in der Mitte ausgerichtet. Also in meinem Bild unten, wenn Text 4 Zeichen ist, würde der Text nicht mehr zentriert sein. Gibt es eine bessere Möglichkeit, Text dynamisch auszurichten?

html:

<div id="countup-container"> 
 
    <img id="countup-image" src="/_layouts/Images/abc/free.png" alt="Free">  
 
    <span id="ctl00" class="countup-text">101</span>  
 
</div>

Relevante CSS:

#countup-container { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
#countup-image { 
 
    display: block; 
 
    margin: auto; 
 
    width: 300px; 
 
    height: 240px; 
 
} 
 

 
.countup-text { 
 
    z-index: 100; 
 
    position: absolute; 
 
    color: black; 
 
    font-size: 40px; 
 
    font-weight: bold; 
 
    left: 45.3%; 
 
    top: 82px; 
 
}

Answer 1

Wenn Sie die absolute Positionierung verwenden es zum Zentrum würden Sie wollen Ihre left: 45%; zu left: 50%; dann ändern, eine wie diese Transformation ein:

.thing_to_center_horizontal { 
    top 82px; 
    left: 50%; 
    transform: translateX(-50%); 
} 

Dies wird es auch mit dynamischen Inhalten machen zentrieren.

left: 50%; wird es in der auf der linken oberen Ecke des Inhalts basierend Zentrum gesetzt, dann wird transform: translateX(-50%); bewegen sie 50% der Breite der Inhalt (das ist der dynamische Teil) nach links es Zentrum macht.

Sinn machen?

Aber vielleicht eine einfache text-align: center; könnte funktionieren, aber es ist schwer zu sagen, weil Sie keinen Code geschrieben haben.

Answer 2

Wenn ich Sie verstehe, können Sie einfach text-align:center zu Ihrem #countup-container hinzufügen.

Und entfernen left:45% zu Ihrem .countup-text