Comments on: Image centering with CSS?

Question: Image centering with CSS?

ralawrence — Wed, 08 Dec 2004 10:24:10 -0800

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)

By: Asparagirl

Asparagirl — Wed, 08 Dec 2004 10:45:58 -0800

Won't this work...?

div.image img {
vertical-align:middle;
}

By: Hildago

Hildago — Wed, 08 Dec 2004 10:54:21 -0800

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?

By: hatbox

hatbox — Wed, 08 Dec 2004 11:08:18 -0800

It hasn't been tested on a Mac, but try Yuhu's Definitive Solution with Unknown Height.

By: ralawrence

ralawrence — Wed, 08 Dec 2004 11:14:20 -0800

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!

By: Danelope

Danelope — Wed, 08 Dec 2004 11:21:51 -0800

Six days ago.

By: Monk

Monk — Wed, 08 Dec 2004 13:43:38 -0800

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.

By: tenseone

tenseone — Thu, 09 Dec 2004 04:35:31 -0800

Would Dead Centre help?

By: ruthsarian

ruthsarian — Thu, 09 Dec 2004 06:28:16 -0800

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).

By: ruthsarian

ruthsarian — Thu, 09 Dec 2004 06:29:26 -0800

Actually, that should be height: auto, not height: 0. Sorry.

By: tenseone

tenseone — Thu, 09 Dec 2004 07:33:10 -0800

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.

By: tenseone

tenseone — Thu, 09 Dec 2004 07:36:30 -0800

Whoops!

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

By: ruthsarian

ruthsarian — Thu, 09 Dec 2004 13:39:00 -0800

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.

By: tenseone

tenseone — Thu, 09 Dec 2004 15:16:44 -0800

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.