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

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

这就是我所拥有的:

这就是我 希望 拥有的:

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>

最佳答案

将数字包裹在 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>

关于javascript - 如何将 <td> 标签内的图像位置设置在左上 Angular ，而文本在左下 Angular ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26068751/