Centre an image in a <div>

Discussion in 'HTML' started by Vince Morgan, Nov 16, 2006.

  1. Vince Morgan

    Vince Morgan Guest

    Hi All,
    I have been trying to centre an image horizontaly (external css)
    within a <div>, without setting explicit XY values, but cannot get it to
    work in either IE6 or the latest Mozilla.
    This may not be the correct forum for this, but I had hoped that, as it is
    very active here, someone may have an answer :)
    I've been googling around half the day and I'm getting nowhere. If it has
    to be an inline style then I'm happy enough to do that.
    TIA,
    Vince Morgan
     
    Vince Morgan, Nov 16, 2006
    #1
    1. Advertising

  2. Vince Morgan

    Els Guest

    Vince Morgan wrote:


    > I have been trying to centre an image horizontaly (external css)
    > within a <div>, without setting explicit XY values, but cannot get it to
    > work in either IE6 or the latest Mozilla.


    If you give a URL, it's much easier for others to see (and tell) why
    it doesn't work for you.

    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/
     
    Els, Nov 16, 2006
    #2
    1. Advertising

  3. Vince Morgan

    K A Nuttall Guest

    Vince Morgan wrote:

    > I have been trying to centre an image horizontaly
    > (external css)
    > within a <div>, without setting explicit XY values, but cannot get
    > it to work in either IE6 or the latest Mozilla.


    Are you sure the DIV is taking the full width (ie not floated or sized
    down)? Otherwise using text-align:center on the DIV should do it.

    As the man said: let's see the code.

    --
    K A Nuttall
    www.yammer.co.uk
    Re-type the e-mail address how it sounds, remove .invalid
     
    K A Nuttall, Nov 16, 2006
    #3
  4. Vince Morgan

    Vince Morgan Guest

    "Vince Morgan" <> wrote in message
    news:455c0ed8$0$5105$...
    > Hi All,
    > I have been trying to centre an image horizontaly (external

    css)
    > within a <div>, without setting explicit XY values, but cannot get it to
    > work in either IE6 or the latest Mozilla.
    > This may not be the correct forum for this, but I had hoped that, as it is
    > very active here, someone may have an answer :)
    > I've been googling around half the day and I'm getting nowhere. If it has
    > to be an inline style then I'm happy enough to do that.
    > TIA,
    > Vince Morgan
    >
    >


    I would love to show the URL but I'm working in an IDE on localhost.
    The <div> is the second last one, which goes to the right of the page.

    <style type="text/css">
    body {
    background: #FFF;
    color: #000;
    width: 795px;
    font-size: 100%;
    }
    div#right, div#left {/*relate the two divs*/
    display: inline;
    float: left;
    }
    div#right {
    padding-left: 120px;/
    }
    label, input.norm, textarea, select.norm {
    display: block;
    width: 200px;
    float: left;
    margin-bottom:11px;
    font-family: Arial, Georgia, Helvitica, sans-serif;
    font-size: .80em;
    background: #FFFF99;
    }
    div label {/* overide the above */
    width: 70px;
    background: #FFF;
    text-align: left;
    color: #044;
    }
    select.norm {
    width: 5em;
    }
    #head {
    color: #369;
    font-family: Helvitica, Arial, sans-serif;
    font-weight: Bold;
    font-size: 1em;
    }
    input#submit {
    position: relative;
    left: 71px;
    }
    img#img_1 {
    border: thin solid #666
    }
    ..centre {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    }
    br {
    clear: left;
    }
    hr {
    width: 85%;
    height: 1px;
    border: #044;
    background-color:#044;
    color: #044;
    }
    ..foot {
    background-color:#FFF;
    color:#666;
    font-family:Arial, Georgia, sans-serif;
    font-size:10px;
    }
    </style>

    </head>
    <body>
    <div id="wrapper">
    <div id="head">Catalogue request
    <p>&nbsp;</p>
    </div>
    <div id="left">
    <form method="post" action="PlannerMail.PHP" name="entry" onSubmit="return
    checkSubmit();">
    <div><label id="lab_1" for="inp_1">Name:</label><input class="norm"
    name="name" id="inp_1"/><br></div>
    <div><label id="lab_2" for="inp_2">Company:</label><input class="norm"
    name="comp" id="inp_2"/><br></div>
    <div><label id="lab_3" for="inp_3">Address:</label>
    <textarea name="addr" cols="20" rows="2" id="inp_3"></textarea><br></div>
    <div><label id="lab_4" for="inp_4">Suburb:</label><input class="norm"
    name="sub" id="inp_4"/><br></div>
    <div><label id="lab_5" for="inp_5">Postcode:</label><input class="norm"
    name="post" id="inp_5"/><br></div>
    <div><label id="lab_6" for="inp_6">State:</label><select class="norm"
    name="state" id="inp_6">
    <option value="ACT">ACT</option>
    <option value="NSW">NSW</option>
    <option value="NT">NT </option>
    <option value="QLD">QLD</option>
    <option value="SA">SA </option>
    <option value="TAS">TAS</option>
    <option value="VIC">VIC</option>
    <option value="N/A">N/A</option>
    </select><br></div>
    <div><label id="lab_7" for="inp_7"> Email:</label><input class="norm"
    name="email" id="inp_7"/><br></div>
    <div><input id="submit" type="submit" value=" Submit "></div>

    </form>
    </div>
    <div class="centre" id="right"><img id="img_1" src="images/CopeLrg.jpg"
    alt="Cope.jpg" /></div>
    <div class="foot centre">
    <br>&nbsp;<br>&nbsp;<br>
    <hr>
    <span>All contents copyright © 2006 - Powered by Capsol Webexpress</span>
    </div>
    </div>
    </body>
    </html>

    Sorry about the size of this post, but I couldn't see much I could leave out
    without breaking it all.
    Vince
     
    Vince Morgan, Nov 16, 2006
    #4
  5. Vince Morgan

    Vince Morgan Guest

    "K A Nuttall" <> wrote in message
    news:Xns987D4F4199F31KeithYammer@212.23.3.119...
    > Vince Morgan wrote:
    >
    > > I have been trying to centre an image horizontaly
    > > (external css)
    > > within a <div>, without setting explicit XY values, but cannot get
    > > it to work in either IE6 or the latest Mozilla.

    >
    > Are you sure the DIV is taking the full width (ie not floated or sized
    > down)? Otherwise using text-align:center on the DIV should do it.


    Nope, it's not full width, and it is floated. I'm guessing that's not a
    good thing?
    Thanks,
    Vince
     
    Vince Morgan, Nov 16, 2006
    #5
  6. Vince Morgan

    dorayme Guest

    In article <Xns987D4F4199F31KeithYammer@212.23.3.119>,
    K A Nuttall <> wrote:

    > As the man said: let's see the code.


    er... look old chap, sex is a very sensitive matter at alt.html
    with so many characters of uncertain determination floating
    about... but I think on this occasion, you need to revise your
    remark. <g>

    To the OP, understand this:

    A div is by default 100% of its container wide. If it is an image
    that is 500px wide you want to centre, no problems (cough,
    cough), just make the div as wide as the image or a bit bigger
    (for borders, captions, whatever)

    width: 520px;

    and try

    margin-left: auto;
    margin-right: auto;

    --
    dorayme
     
    dorayme, Nov 16, 2006
    #6
  7. Vince Morgan

    dorayme Guest

    In article <455c1ddb$0$23136$>,
    "Vince Morgan" <> wrote:

    >
    > I would love to show the URL but I'm working in an IDE on localhost.
    > The <div> is the second last one, which goes to the right of the page.
    >
    > <style type="text/css">
    > body {
    > background: #FFF;
    > color: #000;


    Golly! In all this you don't even bother to say what the width of
    the image is...

    --
    dorayme
     
    dorayme, Nov 16, 2006
    #7
  8. Vince Morgan

    Els Guest

    Vince Morgan wrote:

    >> I have been trying to centre an image horizontaly (external css)
    >> within a <div>, without setting explicit XY values, but cannot get it to
    >> work in either IE6 or the latest Mozilla.
    >> This may not be the correct forum for this, but I had hoped that, as it is
    >> very active here, someone may have an answer :)
    >> I've been googling around half the day and I'm getting nowhere. If it has
    >> to be an inline style then I'm happy enough to do that.

    >
    > I would love to show the URL but I'm working in an IDE on localhost.
    > The <div> is the second last one, which goes to the right of the page.


    [snip]

    > div#right, div#left {/*relate the two divs*/
    > display: inline;
    > float: left;
    > }


    display:inline won't help if you then float it. Floated elements
    become display:block;

    > div#right {
    > padding-left: 120px;/
    > }


    A padding left of 120px gives you 120px space to the left of the image
    inside. How do you want the image then to be centered? With 120px on
    the right too?

    [snip]

    > .centre {
    > text-align:center;
    > margin-top:0px;
    > margin-bottom:0px;
    > padding:0px;
    > }


    Are you trying to override the padding-left you set before?

    [snip]

    > <div class="centre" id="right"><img id="img_1" src="images/CopeLrg.jpg"
    > alt="Cope.jpg" /></div>


    You haven't set a width on that div, and since you floated it, it will
    shrink wrap around the image. Not sure how you figure the image isn't
    centered inside that div? Give the div a border, delete the
    padding-left of 120px, and see if there is any space inside that div
    to have the image *not* centered.

    (not tested, I wasn't in the mood to copy/paste, add a doctype, save
    as html file, upload to server, check results with no image in it)

    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/
     
    Els, Nov 16, 2006
    #8
  9. Vince Morgan

    K A Nuttall Guest

    dorayme wrote:

    > er... look old chap, sex is a very sensitive matter at alt.html
    > with so many characters of uncertain determination floating
    > about... but I think on this occasion, you need to revise your
    > remark. <g>


    erm, oops, erm, as the (wo/)man said...

    if I said I was being figurative in my speech, does that help?

    sorry

    --
    K A Nuttall
    www.yammer.co.uk
    Re-type the e-mail address how it sounds, remove .invalid
     
    K A Nuttall, Nov 16, 2006
    #9
  10. Vince Morgan

    dorayme Guest

    In article <Xns987D60F54DFBAKeithYammer@212.23.3.119>,
    K A Nuttall <> wrote:

    > dorayme wrote:
    >
    > > er... look old chap, sex is a very sensitive matter at alt.html
    > > with so many characters of uncertain determination floating
    > > about... but I think on this occasion, you need to revise your
    > > remark. <g>

    >
    > erm, oops, erm, as the (wo/)man said...
    >
    > if I said I was being figurative in my speech, does that help?
    >


    Yes. I guess it does help. Trouble, it is no longer a known
    expression - but this is not your fault. I wonder what the origin
    of "as the man said" is? Anyway, about the OP, I went to the
    trouble of fitting a jpg for his mark up and noticed the 120px
    padding that Els mentions, got rid of it but really had no idea
    of what he wanted, what was centre of what. It was easy enough to
    make the image the centre of that div:

    div#right {margin:auto;width:400px;}

    But then... I gave up, feeling profoundly sorry for Els - who
    blamelessly would have no idea of what is going on: Vince is from
    the ACT (he left an indication in the form), the ACT is a
    territory whose purpose is to contain the bureaucracy of this
    country. And, naturally, all bets are off...

    (relax Vince, only kidding...)

    --
    dorayme
     
    dorayme, Nov 16, 2006
    #10
  11. Vince Morgan

    Vince Morgan Guest

    "Vince Morgan" <> wrote in message
    news:455c0ed8$0$5105$...
    > Hi All,
    > I have been trying to centre an image horizontaly (external

    css)
    > within a <div>, without setting explicit XY values, but cannot get it to
    > work in either IE6 or the latest Mozilla.
    > This may not be the correct forum for this, but I had hoped that, as it is
    > very active here, someone may have an answer :)
    > I've been googling around half the day and I'm getting nowhere. If it has
    > to be an inline style then I'm happy enough to do that.
    > TIA,
    > Vince Morgan
    >
    >

    Well, I've come to the conclusion that I need to do a lot more reading. I
    don't know enough yet to do what I'm trying to achieve.
    Thank you all for your time.
    Highest regards,
    Vince Morgan
     
    Vince Morgan, Nov 16, 2006
    #11
    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. Andy:P
    Replies:
    8
    Views:
    525
    Andy Peat
    Jan 15, 2004
  2. chris

    DIV relative to centre ?

    chris, Aug 25, 2004, in forum: HTML
    Replies:
    6
    Views:
    9,666
    Daniel
    Sep 7, 2004
  3. Ant
    Replies:
    7
    Views:
    479
  4. xxfiredragonxx
    Replies:
    0
    Views:
    635
    xxfiredragonxx
    Dec 19, 2005
  5. Mike Barnard
    Replies:
    4
    Views:
    403
    Mike Barnard
    May 3, 2007
Loading...

Share This Page