html - 如何在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; 
}

球必须显示在表格的第 1 列中。所以这里有 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

正如我从“因此我必须将其设置为站在行的中心”所理解的那样，

你应该使用

tr
{
text-align:center;
}

代替 td。