468,256 Members | 1,437 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,256 developers. It's quick & easy.

Positioning in DIV with scrollbar

Hi all.
I have a div with a scrollbar, which contains an image:
<div style=" width:15em; height:10em; overflow:scroll;">
<img src="some.gif"/>
</div>

The image is rather small, it occupies only a small part of the div.
This way the image appears in the top left corner of a div.
I want it to appear in the center of the div.

I tried adding align:center to style, and also adding another div
inside the frst one with style="align:center", but this doesn't work.

Is there a way for div with a scrollbar to position embedded tags
in the center of a div?

Thank you in advance for your help.

Anna
Jul 20 '05 #1
6 46477
Anna:
I have a div with a scrollbar, which contains an image:
<div style=" width:15em; height:10em; overflow:scroll;">
<img src="some.gif"/>
</div> The image is rather small, it occupies only a small part of the div.
It's a bit strange that you've set the width of the div in "em"s, when
the only content is an image. The actual size of the div will thus
depend on the font and font size being actually used in display although
there is no actual text in that div. That could be quite another font
and size than you've set in your CSS. If the only content in the div is
an image, then a size in "px" is probably better.

(You must also have an alt attribute in the img.)
This way the image appears in the top left corner of a div.
I want it to appear in the center of the div. I tried adding align:center to style, and also adding another div
inside the frst one with style="align:center", but this doesn't work.


There is no property "align" in CSS. Try "text-align: center".

--
Bertilo Wennergren <be******@gmx.net> <http://www.bertilow.com>

Jul 20 '05 #2
Anna wrote:
I want it to appear in the center of the div.


Top centre, bottom centre or middle centre?

If the image is purely decorational (I assume it is because your example
didn't include any alt text) then you could use:

<div style="width:15em; height:10em; overflow:scroll;
background: white url(some.gif) no-repeat scroll top center;">
&nbsp;</div>

or

<div style="width:15em; height:10em; overflow:scroll;
background: white url(some.gif) no-repeat scroll center center;">
&nbsp;</div>

or

<div style="width:15em; height:10em; overflow:scroll;
background: white url(some.gif) no-repeat scroll bottom center;">
&nbsp;</div>

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

Jul 20 '05 #3
an**@ubaccess.com (Anna) wrote in message news:<8e**************************@posting.google. com>...
I want [an image] to appear in the center of the div.
I tried adding align:center to style, [snip] but this doesn't work.


You need to use 'text-align:center' (as images are inline content).

--- Stephen Morley ---
http://www.safalra.com
Jul 20 '05 #4
Thanks everybody for the answer.
I can't make the image a background of the div, because it can be not
image,
but some other content inside this scrolled div.
So I've added 'text-align:center' to the style attribute of the div.
Now the image is top centered. But I actually want it middle centered,
and cannot find the right css attribute for that.
vertical-align doesn't work on divs.
So is there any other css attribute that can make this image to be
middle centered in the scrollable div?

Thank you all very much for your help.

Anna

us****@safalra.com (Safalra) wrote in message news:<c5**************************@posting.google. com>...
an**@ubaccess.com (Anna) wrote in message news:<8e**************************@posting.google. com>...
I want [an image] to appear in the center of the div.
I tried adding align:center to style, [snip] but this doesn't work.


You need to use 'text-align:center' (as images are inline content).

--- Stephen Morley ---
http://www.safalra.com

Jul 20 '05 #5
How am I supposed to post my replies in a newsgroup?:
http://allmyfaqs.com/faq.pl?How_to_post

Anna wrote:
Thanks everybody for the answer.
I can't make the image a background of the div


--
Brian
follow the directions in my address to email me

Jul 20 '05 #6
an**@ubaccess.com (Anna) wrote in message news:<8e**************************@posting.google. com>...
us****@safalra.com (Safalra) wrote in message news:<c5**************************@posting.google. com>...
an**@ubaccess.com (Anna) wrote in message news:<8e**************************@posting.google. com>...
I want [an image] to appear in the center of the div.
I tried adding align:center to style, [snip] but this doesn't work.


You need to use 'text-align:center' (as images are inline content).


vertical-align doesn't work on divs.
So is there any other css attribute that can make this image to be
middle centered in the scrollable div?

[top posting fixed]

No, but there's a hack involving some extra mark-up, for details see:

http://www.wpdfd.com/editorial/wpd0103.htm#toptip

From your posts so far, it seems you are under the impression that CSS
attributes correspond directly to old HTML attributes. This is not so;
I suggest you have a browse of the CSS recommendation:

http://www.w3.org/TR/REC-CSS2/

--- Stephen Morley ---
http://www.safalra.com
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

9 posts views Thread by Bryan R. Meyer | last post: by
3 posts views Thread by Mike Anderson | last post: by
6 posts views Thread by Susan | last post: by
1 post views Thread by lilo | last post: by
17 posts views Thread by George Hester | last post: by
20 posts views Thread by Geoffrey H. Goldberg | last post: by
1 post views Thread by Eric | last post: by
18 posts views Thread by LayneMitch | last post: by
reply views Thread by NPC403 | last post: by
reply views Thread by kermitthefrogpy | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.