I managed to dig up your trial Diagram from the Comments listing, and I understand now what you mean by the highlighting markers not being centered. It appears that it was a coincidence that they seemed to be well centered correctly in the Diagram with 35x35 squares.
Apparently the way to center images in a <div> is to declare that <div> to be a flexbox, with additional styles:
I have now done this. It doesn't look perfect yet, but it is a lot better than it was.
[Edit] It appears that the remaining amount the markers are off-center is due to the fact that they are a bit low in their 33x33 images to begin with.When an image is displayed as content of a <td> element it is vertically alligned to sit on the 'text line', which leaves some margin under it for the 'true decenders' of letters like g, p, q, j and y. But the flex-box alignment seems to ignore that margin.
So the solution is probably to make a new set of marker images.
I managed to dig up your trial Diagram from the Comments listing, and I understand now what you mean by the highlighting markers not being centered. It appears that it was a coincidence that they seemed to be well centered correctly in the Diagram with 35x35 squares.
Apparently the way to center images in a <div> is to declare that <div> to be a flexbox, with additional styles:
I have now done this. It doesn't look perfect yet, but it is a lot better than it was.
[Edit] It appears that the remaining amount the markers are off-center is due to the fact that they are a bit low in their 33x33 images to begin with.When an image is displayed as content of a <td> element it is vertically alligned to sit on the 'text line', which leaves some margin under it for the 'true decenders' of letters like g, p, q, j and y. But the flex-box alignment seems to ignore that margin.
So the solution is probably to make a new set of marker images.