How do I center a thumbnail picture verically in a floating div?

**Zoef** · Dec 23, 2002 13:36

Hi all!

I'm making a thumbnail picture page. The thumbs are 100x75 and 75x100px (landscape and portrait style). I'm putting these in a floating div with height:100px and width:100px.

I want the thumbnails to be in the center of this, both horizontally and vertically. text-align:center took care of the horizontal bit, no problem there.

But I can't get them to align vertically. I've tried vertical-align:middle but to no avail. Here's the code:

PHP Code:


<html>

<head>

<title>Talitha's birthday</title>

<style type="text/css">

    div.thumb {

        float: left;

        display: block;

        padding: 5px;

        margin: 1px;

        border: 0;

        text-align: center;

        background: silver;

        width :100px;

        height: 100px;

    }

    div.thumb img {border: 0;}

</style>



</head>

<body>

    <div class="thumb"><a href="p\00-02-06.jpg"><img src="p\t_00-02-06.jpg" width="75" height="100"></a></div>

    <div class="thumb"><a href="p\00-02-10.jpg"><img src="p\t_00-02-10.jpg" width="100" height="75"></a></div>

    <!-- More thumbs here -->

</body>

</html>

Preferebly I would like it to work on 5+ browsers. Btw, I know about the 'voice-family' hack to fix widths for ie5win. Since it does not seem relevant to this problem I ommitted it here for the sake of brevity.

Any suggestions welcome

.

Greetings

Rik

<edit> Several typo's </edit>

**Chuckie** · Dec 23, 2002 15:42

Here try this out...

PHP Code:




<html>

<head>

<title>Talitha's birthday</title>

<style tyext/css">

    div.thumb {

       

        display: block;

        padding: 5px;

        margin: 1px;

        border: 0;

        text-align: center;

        background: silver;

        width :100px;

        height: 100px;

    }

    div.thumb img {border: 0;}

</style>



</head>

<body>

   <div style="text-align: center;">



        <div class="thumb">

            

            <a href="p0-02-06.jpg"><img src="p\t_00-02-06.jpg" width="75" height="100"></a>

            

        </div>



        <div class="thumb">

        

            <a href="p0-02-10.jpg"><img src="p\t_00-02-10.jpg" width="100" height="75"></a>

            

        </div>



    </div>

</body>

</html>

I got this to work, I am not sure if it's cross-browers compitable..

**Zoef** · Dec 23, 2002 17:30

Thanks for that chuckie!

I tried it and I'm afraid that's not the effect I'm after, sorry!

Maybe I should have explained a bit better, let me have another stab at it...

First I'll discuss what it already does and then the thing I would like to achieve.

It displays a number of (grey) boxes (div.thumb) of 110x110px(width and height = 100 plus the padding). These gray boxes, thanks to the 'float' wrap around the viewport very much like text does, ie they will display next to each other untill the 'end of the line' and the warp to a next 'line', irrespective of screen width etc... )

Inside each of these boxes is a thumbnail picture of either 100x75px (landscape format) or 75x100px (portrait format).

Now what I'm after is that each thumbnail is displayed in the middle of it's 'grey box', horizontally and vertically. Horizontally I managed, thanks to 'text-align:center'. Vertically I didn't manage...

I hope this made things a bit clearer...

Greetings

Rik

**dense13** · Dec 24, 2002 04:03

Hi Zoef,

I've had the same kind of problem since I started to use css. Still can't find a good solution, but I have found a little trick, which is definitely horrible, but it works. :/

Code:

<head>
<title>Talitha's birthday</title>
<style tyext/css">
    div.thumb {
        float: left;
        display: block;
        padding: 5px;
        margin: 1px;
        border: 0;
        background: center center no-repeat silver;
        width :100px;
        height: 100px;
    }
    div.thumb img {
	border: 0; }
</style>

</head>
<body>
  <div class="thumb" style="background-image:url(1.jpg)">
    <a href="p0-02-06.jpg"><img src="trans.gif" width="100" height="100"></a>
  </div>
  <div class="thumb" style="background-image:url(2.jpg)">
    <a href="p0-02-10.jpg"><img src="trans.gif" width="100" height="100"></a>
  </div>
  <!-- More thumbs here -->
</body>

I know that seeing 'trans.gif' with css hurts

, so let's see if this encourages some of the css-gurus to get us a better answer! Good luck,

d13

**Zoef** · Dec 25, 2002 15:19

Thanks dense13!

Tried it and it worked... in Explorer.

Unfortunately both Mozilla and Opera don't like it. They will only show a 'silver' square. The picture is invisible

.

Thanks for taking your time and a Happy Christmas to you and your family.

Greetings

Rik

PS: Tell Barcelona I will visit her again some day... I love that city

.

**dense13** · Dec 25, 2002 16:50

It works fine in my Mozilla 1.2 (windows) and NS6.2.3, and not perfect, but displaying the images in Opera6.

Come back to BCN when you want! A CSS talk in the old city is something to which I wouldn't say no...

**Zoef** · Dec 26, 2002 14:23

It works just the way you said.

I reeeeealy don't know what got in to me but stupid me made the stupid mistake of putting stupid backslashes in the thumb's url's!!!

Ooooohhhhhh the horror...

Thanks a lot mate!!!!!!

And I just might take you up on that offer one of these years

Greetings

Rik

PS: Did I mention 'stupid'?

**Zoef** · Dec 26, 2002 15:46

New and improved! Washes whiter then white and...

Also perfect in Opera!

Like this:

Code:

background: center center no-repeat silver; /* To make the thumbs center */
background-position: center; /* To make the thumbs also center in Opera */

For reference here's the complete code, also including the 'voice-family' hack:

Code:

<title>Thumbs page</title>
<style type="text/css">
  div.thumb {
    float: left;
    display: block;
    padding:5px;
    margin: 1px;
    border: 0;
    background: center center no-repeat silver; /* To make the thumbs center */
    background-position: center; /* To make the thumbs also center in Opera */
    width :110px; /* Start of 'voice-family' hack for ie5win */
    height: 110px; 
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 100px; 
    height: 100px;
    }
  html>body div.thumb {
    width: 100px; 
    height: 100px;
  }               /* End of 'voice-family' hack for ie5win */
  div.thumb img {
  border:0;
  }
</style>
</head>
<body>
  <div class="thumb" style="background-image: url(p/t_00-02-06.jpg)">
    <a href="p/00-02-06.jpg"><img src="g/e100x100.gif" width="100" height="100" alt="Bigger" /></a>
  </div>
  <div class="thumb" style="background-image: url(p/t_00-02-07.jpg)">
    <a href="p/00-02-07.jpg"><img src="g/e100x100.gif" width="100" height="100" alt="Bigger" /></a>
  </div>
    <!-- More of the same... -->
</body>
</html>

I tested this in ie5.0, moz1.0 and Opera6.05, all under Windows. Just curious about other browsers/platforms... Volunteers?

Just one more thing, not a big issue but since I noticed it I thought I'd mention it. In order to have it really 'pixel-perfect' in ie5.0 one needs to put every 'div' on one single line without linebreaks. Otherwise ie5 will add a few pixels to the height of each 'box'. Just make sure that every 'div' has an equal amount of linebreaks in it so all boxes will be the same size.

Thanks again dense13 and I hope the above might also be of some use to you...

Greetings

Rik

PS: Did I mention I feel kinda 'smart' now?

User Tag List

Thread: How do I center a thumbnail picture verically in a floating div?

Thread Tools

Display

How do I center a thumbnail picture vertically in a floating div?

Horrible solution

stupid stupid stupid!!!!!!!!

Bookmarks

Bookmarks

Posting Permissions