By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,445 Members | 1,159 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,445 IT Pros & Developers. It's quick & easy.

center image in div

P: n/a
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

Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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 vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #2

P: n/a
"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.
Jul 20 '05 #3

P: n/a
"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
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.