I'm looking for a robust solution to center an
<img> element inside a
<li> item both vertically and horisontally. See the attached image to see what I mean.
<li> element will have fixed height and width to make a neat grid across the page. The (linked)
<img> element can be of any proportion inside the max-width and height of 210px.
Am I looking at a
display-table-cell-solution here or what?
I usually put the image as background on a block-level
<a> element, using center center, that way small images sit in the middle and larger images are cropped to the center.
I've been known to use inline css to add images, programatically.