Center image in DIV?

Discussion in 'HTML' started by Noozer, Jan 14, 2004.

  1. Noozer

    Noozer Guest

    Why are there no alignment properties that I can use to align an image
    within a div?

    We haven't finalize our logo so we don't know the final width of the image.
    CSS is supposed to be about layout, not content, so the dimensions shouldn't
    come into play when defining the style sheet anyhow. At this point we are
    going to have to use the <CENTER> tag.

    How do I define that any IMG tag should be centered?

    P.s. I didn't see any groups dedicated to CSS. Please let me know if there
    are any.
     
    Noozer, Jan 14, 2004
    #1
    1. Advertising

  2. Noozer

    brucie Guest

    in post <news:az0Nb.83636$X%5.45527@pd7tw2no>
    Noozer said:

    > Why are there no alignment properties that I can use to align an image
    > within a div?


    whatever{text-align:center:}

    > We haven't finalize our logo so we don't know the final width of the image.
    > CSS is supposed to be about layout, not content, so the dimensions shouldn't
    > come into play when defining the style sheet anyhow.


    that doesn't make sense

    > P.s. I didn't see any groups dedicated to CSS. Please let me know if there
    > are any.


    comp.infosystems.www.authoring.stylesheets


    --
    brucie
     
    brucie, Jan 14, 2004
    #2
    1. Advertising

  3. Noozer

    brucie Guest

    in post <news:bu252c$cp3uq$-berlin.de>
    brucie said:

    > whatever{text-align:center:}

    ^ oops ;


    --
    brucie
     
    brucie, Jan 14, 2004
    #3
  4. Noozer

    Mark Parnell Guest

    On Wed, 14 Jan 2004 01:03:02 GMT, Noozer declared in
    alt.discuss.html,alt.html:

    [alt.discuss.html trimmed as it doesn't exist on my news server]

    > Why are there no alignment properties that I can use to align an image
    > within a div?


    There is. An image is inline content, so text-align is the one you are
    looking for.

    >
    > We haven't finalize our logo so we don't know the final width of the image.
    > CSS is supposed to be about layout, not content, so the dimensions shouldn't
    > come into play when defining the style sheet anyhow. At this point we are
    > going to have to use the <CENTER> tag.


    Bah! Deprecated rubbish.

    > How do I define that any IMG tag should be centered?


    text-align: center;

    > P.s. I didn't see any groups dedicated to CSS. Please let me know if there
    > are any.


    news:comp.infosystems.www.authoring.stylesheets :)

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Jan 14, 2004
    #4
  5. Noozer

    Noozer Guest

    "brucie" <> wrote in message
    news:bu2583$cnppc$-berlin.de...
    > in post <news:bu252c$cp3uq$-berlin.de>
    > brucie said:
    >
    > > whatever{text-align:center:}

    > ^ oops ;


    Thanks!

    Had to set Display: Block; to get it to work though.
     
    Noozer, Jan 14, 2004
    #5
  6. Noozer

    Noozer Guest

    > > We haven't finalize our logo so we don't know the final width of the
    image.
    > > CSS is supposed to be about layout, not content, so the dimensions

    shouldn't
    > > come into play when defining the style sheet anyhow.

    >
    > that doesn't make sense


    What I mean is that all the solutions that I found needed to know the
    dimensions of the image being centered, so the CSS was bound to the specific
    content, not just the page layout. CSS is supposed to be about layout, not
    content.

    The text-align works fine (although doesn't really make much sense, since
    this isn't text.)
     
    Noozer, Jan 14, 2004
    #6
  7. Noozer

    brucie Guest

    in post <news:B41Nb.84638$ts4.47054@pd7tw3no>
    Noozer said:

    >>> whatever{text-align:center;}


    > Had to set Display: Block; to get it to work though.


    thats a bit odd, a div with text-align:center; will center an image
    without having to do anything else.

    --
    brucie
     
    brucie, Jan 14, 2004
    #7
  8. Noozer

    Mark Parnell Guest

    On Wed, 14 Jan 2004 01:43:40 GMT, Noozer declared in
    alt.discuss.html,alt.html:
    >
    > The text-align works fine (although doesn't really make much sense, since
    > this isn't text.)


    But an image is still inline content. Though you said that you had to
    specify display: block; on it, which makes it not inline content.

    Let me guess: you are using Internet Explorer to test. Probably in
    "quirks" mode. Internet Explorer is broken. You shouldn't use it as your
    primary test browser.

    More info on centring:
    http://dorward.me.uk/www/centre/

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Jan 14, 2004
    #8
  9. Noozer

    Noozer Guest

    "Mark Parnell" <> wrote in message
    news:1i0rvge7wg1xa.b0qa6dnb8vni$...
    > On Wed, 14 Jan 2004 01:43:40 GMT, Noozer declared in
    > alt.discuss.html,alt.html:
    > >
    > > The text-align works fine (although doesn't really make much sense,

    since
    > > this isn't text.)

    >
    > But an image is still inline content. Though you said that you had to
    > specify display: block; on it, which makes it not inline content.
    >
    > Let me guess: you are using Internet Explorer to test. Probably in
    > "quirks" mode. Internet Explorer is broken. You shouldn't use it as your
    > primary test browser.


    I know what you mean... It's not my test browser though, it's my target
    browser.

    I think that the W3C (or whoever makes the rules for CSS) should develop a
    common rendering/interpretation engine that the browser makes could include
    in their builds. This would ensure 100% compliance.
     
    Noozer, Jan 14, 2004
    #9
  10. Noozer wrote:
    > ...
    > I think that the W3C (or whoever makes the rules for CSS) should
    > develop a common rendering/interpretation engine that the browser
    > makes could include in their builds. This would ensure 100%
    > compliance.


    Good plan - and you called brucie a nazi - go for it ;o)

    --
    William Tasso - http://WilliamTasso.com
     
    William Tasso, Jan 14, 2004
    #10
  11. Noozer wrote:
    > I think that the W3C (or whoever makes the rules for CSS) should develop a
    > common rendering/interpretation engine that the browser makes could include
    > in their builds. This would ensure 100% compliance.


    Wouldn't work, since most browser makers wouldn't use it. Every browser
    could give up their rendering engines and switch to KHTML or Gecko right
    now, but they don't.
     
    Leif K-Brooks, Jan 14, 2004
    #11
  12. brucie wrote:

    > in post <news:B41Nb.84638$ts4.47054@pd7tw3no>
    > Noozer said:
    >
    >>>> whatever{text-align:center;}

    >
    >> Had to set Display: Block; to get it to work though.

    >
    > thats a bit odd, a div with text-align:center; will center an image
    > without having to do anything else.


    I think he's using

    img { text-align: center; display: block; }

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Jan 14, 2004
    #12
  13. Noozer wrote:

    > I think that the W3C (or whoever makes the rules for CSS) should develop a
    > common rendering/interpretation engine


    They have. It's called Amaya.

    > that the browser makes could include in their builds.


    They can, but they don't.

    > This would ensure 100% compliance.


    Which is why it hasn't.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Jan 14, 2004
    #13
  14. Noozer

    rf Guest

    "Noozer" <postmaster@127.0.0.1> wrote in message
    news:Lu2Nb.85137$ts4.6420@pd7tw3no...
    >
    > I think that the W3C (or whoever makes the rules for CSS) should develop a
    > common rendering/interpretation engine that the browser makes could

    include
    > in their builds. This would ensure 100% compliance.


    Now there is a very good idea...

    if it were not just so hilarious :)

    Cheers
    Richard.
     
    rf, Jan 14, 2004
    #14
  15. Noozer

    DU Guest

    Noozer wrote:
    > "Mark Parnell" <> wrote in message
    > news:1i0rvge7wg1xa.b0qa6dnb8vni$...
    >
    >>On Wed, 14 Jan 2004 01:43:40 GMT, Noozer declared in
    >>alt.discuss.html,alt.html:
    >>
    >>>The text-align works fine (although doesn't really make much sense,

    >
    > since
    >
    >>>this isn't text.)

    >>
    >>But an image is still inline content. Though you said that you had to
    >>specify display: block; on it, which makes it not inline content.
    >>
    >>Let me guess: you are using Internet Explorer to test. Probably in
    >>"quirks" mode. Internet Explorer is broken. You shouldn't use it as your
    >>primary test browser.

    >
    >
    > I know what you mean... It's not my test browser though, it's my target
    > browser.
    >
    > I think that the W3C (or whoever makes the rules for CSS) should develop a
    > common rendering/interpretation engine that the browser makes could include
    > in their builds. This would ensure 100% compliance.
    >
    >


    Just a few remarks about your previous posts including this one.

    1- Internet Explorer 6 for windows is not broken or anything as long as
    the page triggers standards compliant rendering mode. MSIE 6 for windows
    is admittedly not perfect. But it will correct many compliance issues,
    matters (namely its CSS1 box model for which developers have been
    complaining about during several years) when it is triggered into the
    standards compliance rendering mode. You are strongly encouraged to use
    a strict definition for your markup code, of course to use a doctype
    declaration and to validate your markup and CSS code.

    2- 100% compliance among browsers is an utopia. Most browser
    manufacturers/organizations (like Mozilla.org, Opera, etc.) are still
    striving to support all HTML 4.01 elements and attributes and they still
    have not.

    3- You are right in my opinion when you suggest that text-align is
    misleading. If the whole TR had to be re-written, I would vote for
    inline-alignment instead or something like that.

    DU
     
    DU, Jan 14, 2004
    #15
  16. Noozer

    DU Guest

    Leif K-Brooks wrote:

    > Noozer wrote:
    >
    >> I think that the W3C (or whoever makes the rules for CSS) should
    >> develop a
    >> common rendering/interpretation engine that the browser makes could
    >> include
    >> in their builds. This would ensure 100% compliance.

    >
    >
    > Wouldn't work, since most browser makers wouldn't use it. Every browser
    > could give up their rendering engines and switch to KHTML or Gecko right
    > now, but they don't.
    >


    MyIE2 has. I've been using Mozilla 1.5 as the rendering engine for MyIE2
    for over 3 weeks now. I think such flexibility and interoperability was
    the greatest news in the browser market in 2003.

    DU
     
    DU, Jan 14, 2004
    #16
  17. DU wrote:

    >1- Internet Explorer 6 for windows is not broken or anything as long as
    >the page triggers standards compliant rendering mode.


    Even then too many things are missing or broken (min/max-width, :before,
    :after, :hover on elements other than anchors, margin: auto, background-
    position when used with background-attachment: fixed, child-/attribute-
    and many other selectors, <q>, PNG-support, ...).

    Micha
     
    Michael Fesser, Jan 14, 2004
    #17
  18. DU wrote:

    > MyIE2 has. I've been using Mozilla 1.5 as the rendering engine for MyIE2
    > for over 3 weeks now. I think such flexibility and interoperability was
    > the greatest news in the browser market in 2003.


    I believe Neoplanet also allows you to use Gecko now. And there's a Gecko
    patch for Konqueror. Nautilus 1.x allowed you to switch between GtkHTML
    and Gecko, but Nautilus 2.x is strictly GtkHTML only.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Jan 14, 2004
    #18
  19. On Wed, 14 Jan 2004 01:43:40 GMT, "Noozer" <postmaster@127.0.0.1>
    wrote:
    >
    >What I mean is that all the solutions that I found needed to know the
    >dimensions of the image being centered, so the CSS was bound to the specific
    >content, not just the page layout. CSS is supposed to be about layout, not
    >content.


    That's no different than a designer, laying out a page, having to
    block out an finite space alongside a column of copy. That is very
    much about layout and has nothing to do with any text content.

    You can always change the <div> dimensions later, y'know, once you've
    established the final size of your logo.

    >The text-align works fine (although doesn't really make much sense, since
    >this isn't text.)


    Well, in a sense it is textural -- in that you're including the image
    within the body you've created as a <div>.
     
    Steve Sundberg, Jan 15, 2004
    #19
  20. Noozer

    Noozer Guest

    "William Tasso" <> wrote in message
    news:bu2o5i$c9h3d$-berlin.de...
    > Noozer wrote:
    > > ...
    > > I think that the W3C (or whoever makes the rules for CSS) should
    > > develop a common rendering/interpretation engine that the browser
    > > makes could include in their builds. This would ensure 100%
    > > compliance.

    >
    > Good plan - and you called brucie a nazi - go for it ;o)


    Hey! It was all in good humour!!!
     
    Noozer, Jan 15, 2004
    #20
    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. K Viltersten

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

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    776
  2. AAaron123
    Replies:
    1
    Views:
    5,004
  3. 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
  4. mscir
    Replies:
    3
    Views:
    334
    Martin Honnen
    Jun 26, 2005
  5. Gernot Frisch

    center div over another div

    Gernot Frisch, Mar 16, 2006, in forum: Javascript
    Replies:
    1
    Views:
    194
    Randy Webb
    Mar 16, 2006
Loading...

Share This Page