Positioning in DIV with scrollbar

Discussion in 'HTML' started by Anna, Nov 23, 2003.

  1. Anna

    Anna Guest

    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
     
    Anna, Nov 23, 2003
    #1
    1. Advertising

  2. 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 <> <http://www.bertilow.com>
     
    Bertilo Wennergren, Nov 23, 2003
    #2
    1. Advertising

  3. 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
     
    Toby A Inkster, Nov 23, 2003
    #3
  4. Anna

    Safalra Guest

    (Anna) wrote in message news:<>...
    > 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, Nov 23, 2003
    #4
  5. Anna

    Anna Guest

    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

    (Safalra) wrote in message news:<>...
    > (Anna) wrote in message news:<>...
    > > 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, Nov 24, 2003
    #5
  6. Anna

    Safalra Guest

    (Anna) wrote in message news:<>...
    > (Safalra) wrote in message news:<>...
    > > (Anna) wrote in message news:<>...
    > > > 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
     
    Safalra, Nov 25, 2003
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. r pasadhy via .NET 247

    positioning vertical scrollbar

    r pasadhy via .NET 247, Aug 11, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    3,150
    Joe Fallon
    Aug 12, 2004
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    776
  3. Alex

    ScrollBar? Does it exist just WEB ScrollBar Control?

    Alex, Apr 1, 2004, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    279
    Alvin Bruney [MVP]
    Apr 4, 2004
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    208
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    334
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page