Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Centre an image in a <div>

Reply
Thread Tools

Centre an image in a <div>

 
 
Vince Morgan
Guest
Posts: n/a
 
      11-16-2006
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


 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      11-16-2006
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/
 
Reply With Quote
 
 
 
 
K A Nuttall
Guest
Posts: n/a
 
      11-16-2006
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
 
Reply With Quote
 
Vince Morgan
Guest
Posts: n/a
 
      11-16-2006
"Vince Morgan" <(E-Mail Removed)> wrote in message
news:455c0ed8$0$5105$(E-Mail Removed) ...
> 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


 
Reply With Quote
 
Vince Morgan
Guest
Posts: n/a
 
      11-16-2006
"K A Nuttall" <(E-Mail Removed)> 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


 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      11-16-2006
In article <Xns987D4F4199F31KeithYammer@212.23.3.119>,
K A Nuttall <(E-Mail Removed)> 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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      11-16-2006
In article <455c1ddb$0$23136$(E-Mail Removed)> ,
"Vince Morgan" <(E-Mail Removed)> 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
 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      11-16-2006
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/
 
Reply With Quote
 
K A Nuttall
Guest
Posts: n/a
 
      11-16-2006
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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      11-16-2006
In article <Xns987D60F54DFBAKeithYammer@212.23.3.119>,
K A Nuttall <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Basic question. Centre text in the remaining space to right of image? Mike Barnard HTML 4 05-03-2007 06:43 PM
Firefox Centre Firefox Centre Firefox 0 12-15-2005 11:04 AM
How can I make an image appear in the centre of the page? Ant HTML 7 08-10-2005 12:39 PM
Sort of OT but not - Pinnacle show centre Rachael the Wiccan Rat Wireless Networking 0 09-17-2004 01:15 PM
Re: exam centre in london Justin Dutoit MCSD 0 08-15-2003 02:52 AM



Advertisments