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 about 7 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 about 7 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 about 7 years ago

1 answer

1
point

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 about 7 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 about 7 years ago
  • Well I looked long and hard, and didn't find one, before I settled on using background images. Tony Crockford about 7 years ago