动态显示图像内部文本

Question

我有一个容器div，其高度和宽度设置为100％，位置是相对的。在div中，我使用display：block和margin：auto来居中一个图像（图像小于div）。然后我尝试使用position：absolute，left：45％，top 82px将文本居中放在图像中。垂直对齐似乎没问题，但随着文本中字符数的增加，文本不再在中间对齐。因此，在下面的图像中，如果文本是4个字符，则文本将不再居中。有没有更好的方法来动态对齐文本？

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>

相关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

如果您使用绝对定位来居中，则需要将left: 45%;更改为left: 50%;，然后设置如下变换：

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

这将使其成为动态内容的中心。

left: 50%;会根据内容的左上角将其置于中心位置，然后transform: translateX(-50%);会将内容宽度的50％（这是动态部分）移动到左侧它的中心。

有意义吗？

但也许一个简单的text-align: center;可能有效，但很难说，因为你没有发布任何代码。

Answer 2

如果我了解您，您只需将function startingCardLayout(){ var nextHeroCard=0; var x=0; for (i=0;i<=2;i++){ myHeroCards[x].image.onload = function (){ctx.drawImage(myHeroCards[x].image,(xFirstCol+(x*xColInc)),100,xCardSize,yCardSize);} alert(x); x=x+1; } } 添加到text-align:center。

将#countup-container移至left:45%