如何将 <td> 标签内的图像位置设置在左上角，而文本在左下角

Question

我有两个 pawn，我想将它们设置在左上角，而文本（单元格编号）在左下角。

这就是我所拥有的：

这就是我想要的：

CSS :

td {
    width: 80px;
    height: 80px;
    text-align: left;
    vertical-align: bottom;
    border: 1px solid black;
}

.soldiers
{
    width:20px;
    height:20px;
}

HTML :

<tr>
<td class="oddCellBorder" row="0" col="0">57
<img src="Resources/images/player_2.png" class="soldiers">
<img src="Resources/images/player_1.png" class="soldiers">
</td>
<td class="evenCellBorder" row="0" col="1">58</td>
<td class="oddCellBorder" row="0" col="2">59</td>
<td class="evenCellBorder" row="0" col="3">60</td>
<td class="oddCellBorder" row="0" col="4">61</td>
<td class="evenCellBorder" row="0" col="5">62</td>
<td class="oddCellBorder" row="0" col="6">63</td>
<td class="evenCellBorder" row="0" col="7">64</td>
</tr>

Answer 1

将数字包裹在 a 中span并将其放在底部，以及vertical-align: top;其他所有内容。

td {
    position: relative;
    vertical-align: top;
    width: 80px;
    height: 80px;
    text-align: left;        
    border: 1px solid black;        
}

td span {
    position: absolute;
    bottom: 0;
}

<table>
    <tr>
        <td>
            <span>57</span>
            <img src="http://placehold.it/20x20/ff6a00/ff6a00" alt="" />
            <img src="http://placehold.it/20x20/fb235e/fb235e" alt="" />
        </td>
    </tr>
</table>