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.

alt text

The <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?

  • Rats, typo in question header.. >_< Jens Hedqvist almost 8 years ago
  • table-cell would work on "modern browsers", but I would kill to find a solution that works on IE 6 also! Divya Manian almost 8 years ago
  • I decided to go with a javascript enhanced centering. The drop shadow framing now wraps around the image. Those without javascript gets a fully functional view but not as nice grid. I guess I should implement table-cell solution with the JS for IE6 and below only. We'll c. Jens Hedqvist almost 8 years ago

1 answer


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.

Answered almost 8 years ago by Tony Crockford
  • Thanks. That is certainly a solution alltough I'm going to look for a more semantically rich variant with images first. Jens Hedqvist almost 8 years ago
  • Well I looked long and hard, and didn't find one, before I settled on using background images. Tony Crockford almost 8 years ago