|
|
Posted by Els on 11/16/06 08:36
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/
Navigation:
[Reply to this message]
|