Image centering with CSS?

December 8, 2004 10:24 AM

Following some googling, I've found a few sites that claim you can't use CSS to centre an image vertically within a div. Does this mean that I can't get the images on this page to float in the centre of their respective grey box? At the moment, they only seem to be postioned in the middle at the top of the box and even the middle bit is only because there is a text-align:center in there. (I don't mind If I have to lose the title of the image to get this to work)
posted by ralawrence to technology (13 comments total)

Won't this work...?

div.image img {
vertical-align:middle;
}
posted by Asparagirl at 10:45 AM on December 8, 2004

This ought to be a silly question, but CSS positioning, though crippled in numerous ways, does rule the world, so I can understand if it never even occured to you, but... have you tried using a table?
posted by Hildago at 10:54 AM on December 8, 2004

It hasn't been tested on a Mac, but try Yuhu's Definitive Solution with Unknown Height.
posted by hatbox at 11:08 AM on December 8, 2004

I tried vertical-align on "div.image" and "div.image img" and neither worked.

As for tables, my old album used them but had to assume a fixed width. I'd ideally like to use CSS so it reflows correctly on different sized windows - but it isn't as easy as I thought it would be!
posted by ralawrence at 11:14 AM on December 8, 2004

Six days ago.
posted by Danelope at 11:21 AM on December 8, 2004

vertical-align is specifically for table cells, not arbitrary block elements. However, you can use display: table-cell to make any element behave like a table cell; giving it the ability to align its contents vertically. Unfortunately, this doesn't work in IE6.

The following works on FireFox and IE6 in both strict and quirks modes. I don't have any other browsers here to test on. (The second block of CSS isn't necessary, it just styles the page to look like the example.)


#PhotoAlbum a {
  display: block;
  float: left;
  background-color: #eef;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  width: 110px;
  padding: 95px 0 3px 0;
  text-align: center;

  border: #ccc 1px dashed;
  margin: 0 10px 10px 0;
  font-family: Trebuchet MS;
  color: #000;
  font-size: 10px;
}

<div id="PhotoAlbum">
  <a href="IMG_1736.JPG" title="IMG_1736.JPG" style="background-image: url(IMG_1736.JPG)">IMG_1736</a>
</div>


While it's easier to center background images than inline images, there are some downsides. There is no alt attribute for screen readers and background images do not print using default settings, making it more difficult to print a contact sheet should you need a hard copy.
posted by Monk at 1:43 PM on December 8, 2004

Would Dead Centre help?
posted by tenseone at 4:35 AM on December 9, 2004

vertical-align isn't just for tables, it's actually applicable to any inline element such as text or an image. It determines how inline elements of varying heights will line-up next to each other.

In the case of ralawrence's contact sheet, the easiest way to do vertical-alignment is to remove the titles of the images so it's just a single image inside each box. Then define the font-width for the boxes as the pixel height you want the box, rather than explicitly setting the height attribute on the parent div element. Something like this:

div.image {
font-size: 100px;
line-height: 120px;
padding: 0;
height: 0;
}
div.image img {
vertical-align: middle;
}

Background images might work as well but you run into the problem of either figuring out how to push the image name to the bottom of that window block (so it doesn't appear over the image) or making the div clickable (via some javascript).

The Dead Centre approach works well too, but you have to be working with known pixel height, and you'd need a different selector defined for each height you have (60 and 80 it appears).
posted by ruthsarian at 6:28 AM on December 9, 2004

Actually, that should be height: auto, not height: 0. Sorry.
posted by ruthsarian at 6:29 AM on December 9, 2004

Would something like this work ( I didn't actually test it ):

<?php

for($i = 1000,$i <= 4000,$i++) {

 if(is_array(getimagesize($_SERVER['DOCUMENT_ROOT'] . '/test/Vienna/thumb/IMG_' . $i . '.JPG'))) {

  $image = getimagesize($_SERVER['DOCUMENT_ROOT'] . '/test/Vienna/thumb/IMG_' . $i . '.JPG');

  $width = $image[0];
  $height = $image[1];
  $w_pos = $image[0] / 2;
  $h_pos = $image[1] / 2;

  echo '<div class="box">';
  echo '<img style="width:' . $width . ';height:' . $height . ';position:absolute;left:50%;top:-' . $h_pos . ';margin-left:-' . $w_pos . ';visibility:visible;" src="/test/Vienna/thumb/IMG_' . $i . '.JPG" alt="" width="' . $width . '" height="' . $height . '" />';
  echo '</div>';

 }

}

?>

Again, I didn't actually test it.
posted by tenseone at 7:33 AM on December 9, 2004

Whoops!

for($i = 1000;$i <= 4000;$i++) {
posted by tenseone at 7:36 AM on December 9, 2004

Would something like this work

tenseone: that looks good to me. As long as your contact sheets aren't too big. If you've got, say, 1000 images per page, then that's 2000 (because you're calling getimagesize twice) open,read,close operations per page visit.

If it's 25 or so, then that should work fine.
posted by ruthsarian at 1:39 PM on December 9, 2004

If you've got, say, 1000 images per page, then that's 2000 (because you're calling getimagesize twice) open,read,close operations per page visit.

Absolutely, I made a glaring error in logic. It would seem to be more intelligent to simply sort through the contents of the 'thumb' directory, and only call getimagesize on existing '.JPG' files. At least we would be cutting the executions in half.

Though even still, if we were discussing thousands of images, how would the processing time of the script compare to the taxing event of loading thousands of jpegs? Or am I completely off base in my thinking ( most likely )?

Of course, I may very well be guilty of flogging a dead horse.
posted by tenseone at 3:16 PM on December 9, 2004