center image in div

[steven]

Hi,
I'm trying to center an image in a div, both horizontally and vertically.
(Each div holds a thumbnail image.)
Here's the HTML:

<div class="thumb">
<div>
<img src="tn_02-2022.jpg" />
</div>
<p>
<a href="../../dummy.htm">small</a> (480 x 320)<br />
<a href="../../dummy.htm">medium</a> (768 x 512)<br />
<a href="../../dummy.htm">large</a> (1536 x 1024) </p>
</p>
</div>

and this is the CSS:

div.thumb {
width: 125px;
height: 190px;
background-image: url(../../img/slide.png);
background-repeat: no-repeat;
padding: 10px;
float: left;
}

div.thumb div {
width: 120;
height: 120px;
margin: 0px auto 20px auto;
}

div.thumb p {
font-size: 9px;
line-height: 12px;
}

You can see the result here:
http://users.pandora.be/nenya/anor/i...is01/index.htm
The thumbs are not horizontally aligned, though I was hoping the "margin:
auto" would do the trick.

As for vertical alignment, Googling around I found solutions using tables
and even frames (for centering on a page).
Can I do it without tables? The CSS above doesn't contain anything for
centering vertically, 'coz I didn't know where to start :-(
I'd be really grateful if you guyz/galz can help me out.

Steven

[Els]

steven wrote:

Hi,
I'm trying to center an image in a div, both horizontally and vertically.
(Each div holds a thumbnail image.)
Here's the HTML:

<div class="thumb">
<div>
<img src="tn_02-2022.jpg" />
</div>
<p>
<a href="../../dummy.htm">small</a> (480 x 320)<br />
<a href="../../dummy.htm">medium</a> (768 x 512)<br />
<a href="../../dummy.htm">large</a> (1536 x 1024) </p>
</p>
</div>

and this is the CSS:

div.thumb {
width: 125px;
height: 190px;
background-image: url(../../img/slide.png);
background-repeat: no-repeat;
padding: 10px;
float: left;
}

div.thumb div {
width: 120;
height: 120px;
margin: 0px auto 20px auto;
}

div.thumb p {
font-size: 9px;
line-height: 12px;
}

You can see the result here:
http://users.pandora.be/nenya/anor/i...is01/index.htm
The thumbs are not horizontally aligned, though I was hoping the "margin:
auto" would do the trick.

As for vertical alignment, Googling around I found solutions using tables
and even frames (for centering on a page).
Can I do it without tables? The CSS above doesn't contain anything for
centering vertically, 'coz I didn't know where to start :-(
I'd be really grateful if you guyz/galz can help me out.

There recently was a long thread about this stuff in
alt.html. First message of that thread: 23-2-2004 by Max
Quordlepleen, subject: Thumbnail gallery without tables?
message id: <wu**********@maxqnz.com>

Read that thread, and if you have questions afterwards, ask
again ;-)
--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Karl Smith]

"steven" <st***********@pandora.be> wrote:

I'm trying to center an image in a div, both horizontally and vertically.
(Each div holds a thumbnail image.)
http://users.pandora.be/nenya/anor/i...is01/index.htm

Images are inline elements, so the horizontal centering is easy - just
add {text-align: center} to the div.

I don't trust any of the solutions around for vertical centering, I
think you should use two classes .horizontal and .vertical and set
different padding-top on them.

The 9px font is a bit fragile too, I get line-breaks because my
minimum font size is greater than 9px.

--
Karl Smith.

[steven]

"Karl Smith" <go************@kjsmith.com> wrote in message
news:3d************************@posting.google.com ...

"steven" <st***********@pandora.be> wrote:

I'm trying to center an image in a div, both horizontally and vertically. (Each div holds a thumbnail image.)
http://users.pandora.be/nenya/anor/i...is01/index.htm
Images are inline elements, so the horizontal centering is easy - just
add {text-align: center} to the div.

I don't trust any of the solutions around for vertical centering, I
think you should use two classes .horizontal and .vertical and set
different padding-top on them.

No can do. The images don't have a fixed 2:3 aspect ratio, so the padding
could be different for each thumb. But that's OK; I can use inline styles. I
think I'll write a small code generator to create the pages from folder with
images.
The 9px font is a bit fragile too, I get line-breaks because my
minimum font size is greater than 9px.

Oops, my wrong. Of course you don't express font size in pixels. Thanks for
pointing out the error.

Steven