Positioning in DIV with scrollbar

[Anna]

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

 

[Bertilo Wennergren]

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".

 

[Toby A Inkster]

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>

 

[Safalra]

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

 

[Anna]

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

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

 

[Safalra]

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