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