如何在div中没有​​固定宽度的情况下集中相对位置元素？

Question

我必须在图像上方显示文字，使其看起来像斯诺克球（球顶部的数字），HTML和CSS如下所示，我只需更改容器即可轻松修改图像高度和宽度高度和宽度。它工作正常！下面是黄球和蓝球。

HTML

<div class="resultNumberContainer">
<img src="images/yellowBall.png" />
<span class="numberText">1</span>
</div>

<div class="resultNumberContainer">
<img src="images/blueBall.png" />
<span class="numberText">5</span>
</div>

CSS

.resultNumberContainer
{
    display: inline-block;
    height: 28px;
    width: 28px;
    line-height: 28px;
    font-weight:bold;
    float:left;
    position:relative;
}

.resultNumberContainer img
{
    width: 100%;
    position:absolute;
    height: auto;
}

.numberText
{
    text-align:center;
    color: White;
    width: 100%;
    position:absolute;
    height: auto; 
}

球必须显示在表格的一列中。所以这里有3列：2个斯诺克球，第2列和第3列。

<table>
<tr>
<td>
<div style="margin: 0 auto;background-color:green;width:100%;height:auto;">

    <div class="resultNumberContainer">
    <img src="images/num_blue_small2.png" />
    <span class="numberText">1</span>
    </div>

    <div class="resultNumberContainer">
    <img src="images/num_blue_small2.png" />
    <span class="numberText">1</span>
    </div>
</div>

</td>
<td>column 2</td>
<td>column 3</td>
</tr>
</table>

默认情况下，列中的元素显示在左侧。我想让它显示在中心。通过将 td 或 tr 设置为 text-align：center ，它仅适用于第2列和第3列，但斯诺克球看起来不太好。 我该怎么办？

Answer 1

正如我从＃34中所理解的那样;因此我必须将它设置在行的中心位置＆＃34;，

你应该使用

tr
{
text-align:center;
}

而不是td。

Answer 2

新代码here to test。如果这不是你想要的，那么我无法弄清楚你想要做什么。也许你可以提供你想要实现的形象或事物。

Updated the code for the fiddle.