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

Question

I have two pawns and I want to set them on the top-left corner while the text (cell number) is on left-bottom.

This is what I have:

This is what I want to have:

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

Wrap the number in a span and position it at the bottom, and vertical-align: top; everything else.

 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> 

Answer 2

You are using way too much code. Using CSS counters you can make this problem completely trivial.

See this demonstration fiddle . I generate the board completely in JS, allowing you to use it in an array, and then use CSS counters ( universally supported ) with pseudo elements to put the numbers in there with absolute positioning.

For the background coloring I use trivial nested nth-child selectors. Then just apply vertical-align:top to the cell and let the flow do the job - I use text content here but images will flow the same as they're both inline content.

All the CSS needed:

table {
    counter-reset:number 65;
}
td {
    border:1px solid black;
    counter-increment:number -1;
    width:64px;
    height:64px;
    position:relative;
    vertical-align:top;
}
tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) {
    background:#aaf;
}
td:after {
    content:counter(number);
    position:absolute;
    bottom:0;
    left:0;
}

Sample linked again here to be sure you don't miss it .

Answer 3

A way to do it without extra mark-up

Since you specified the dimensions of the icons (20x20), you can take advantage of that and use the nth-child selector to position the two icons to the top left of the table cell.

However, you do need to set the left offset to a specific value based on the dimension given in .soldier .

 td { width: 80px; height: 80px; text-align: left; vertical-align: bottom; border: 1px solid black; position: relative; } .soldiers { width: 20px; height: 20px; display: inline-block; margin-right: 5px; position: absolute; top: 0; } img:nth-child(1) { left: 0; } img:nth-child(2) { left: 25px; } 

 <table> <tr> <td class="oddCellBorder" row="0" col="0"> 57 <img src="http://placehold.it/10x10" class="soldiers"> <img src="http://placehold.it/10x10" 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> </table>