Centering Image in <DIV>
CJM
to be centered (horizontally) within its container. I'm not bothered whether
the accompanying line of text is restricted to the width of the image and
centered, or whether is simply fills the width of the container.
I've tried various things to achieve this (e.g setting margins to auto) but
I'm not having much luck.
The URL for the page is: http://www.eminox.es
And the key stylesheet is: http://www.eminox.es/_lib.css/home.css
The containing DIV has the following styling:
.hl06 {
width:510px;
height:100px;
position: absolute;
top: 66px;
left: 230px;
font-size: 75%;
padding: 4px 10px;
}
And the relevant HTML snippet is:
<div class="hl06 yellow">
<img src="/home/images/fiaa_468x60.gif" height="60" width="468" alt="FIAA
Feria de madrid 14 - 17 Octubre 2008, Pabell�n 9 Puesto C27">
Vis�tenos en la <strong>Feria Internacional del Autob�s y Autocar</strong>
en Madrid, del 14 al 17 de octubre <strong>Pabell�n 9 Puesto C27</strong>.
</div>
As you can see, the container is 51-px wide, and the image is 470px wide; I
considered manually fixing the position, but I'd prefer to master a more
fluid technique. I've stripped out the abortive crap from previous attempts,
so hopefully it's as near to a blank canvas as we will get.
Thanks in advance.
CJM
Andy Dingley
> I've tried various things to achieve this (e.g setting margins to auto) but
> I'm not having much luck.
CSS has two notions of "centring"
Block-behaving elements will center if you set their own margins to
auto.
Inline-behaving elements (and this includes <img> with default CSS
settings) will respond to setting text-align on their parent (i.e. the
<div>) instead.
CJM
"Andy Dingley" <din...@codesmiths.com> wrote in message
news:4ff25660-ff45-43d0...@m74g2000hsh.googlegroups.com...
I'd considered text-align, but I don't want the text part of it centered.
So I wrapped the the whole lot in a <span> and set it's margins to auto and
it's width to 470px, but that didn't work either.
Irina Rempt
> "Andy Dingley" <din...@codesmiths.com> wrote in message
> news:4ff25660-ff45-43d0...@m74g2000hsh.googlegroups.com...
>> Block-behaving elements will center if you set their own margins to
>> auto.
>>
>> Inline-behaving elements (and this includes <img> with default CSS
>> settings) will respond to setting text-align on their parent (i.e. the
>> <div>) instead.
>
> I'd considered text-align, but I don't want the text part of it centered.
>
> So I wrapped the the whole lot in a <span> and set it's margins to auto
> and it's width to 470px, but that didn't work either.
I had a similar problem which I solved by setting both "text-align: center"
on the containing box and "margin: 0 auto" on the img itself. If you don't
want the text centered, you could either set "text-align: left" for the
text (and have that rule after the div text-align rule) or have the image
and the text each in their own <div> container.
Have you tried "display: block" for the img to make it behave as a block?
Irina
--
"Of course it is happening inside your head, Harry, but why on earth
should that mean that it is not real?" --Albus Dumbledore
http://www.valdyas.org/foundobjects/index.cgi Latest: 01-Oct-2008
Adrienne Boswell
writing in news:6kkdj4F...@mid.individual.net:
>
>
> "Andy Dingley" <din...@codesmiths.com> wrote in message
> news:4ff25660-ff45-43d0-afa3-9c914f5192f3
@m74g2000hsh.googlegroups.com.
> ..
>> On 2 Oct, 17:41, "CJM" <cjmn...@removeme-yahoo.co.uk> wrote:
>>
>>> I've tried various things to achieve this (e.g setting margins to
>>> auto) but
>>> I'm not having much luck.
>>
>> CSS has two notions of "centring"
>>
>> Block-behaving elements will center if you set their own margins to
>> auto.
>>
>> Inline-behaving elements (and this includes <img> with default CSS
>> settings) will respond to setting text-align on their parent (i.e.
>> the <div>) instead.
>
> I'd considered text-align, but I don't want the text part of it
> centered.
>
> So I wrapped the the whole lot in a <span> and set it's margins to
> auto and it's width to 470px, but that didn't work either.
>
>
Span is inline. Use a block level element, or display an inline element
as block.
--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
Scott Bryce
> So I wrapped the the whole lot in a <span> and set it's margins to
> auto and it's width to 470px, but that didn't work either.
Because a span is in-line and not a block. In-line elements cannot be
centered. Centering something that is in-line does not make sense. If
you want an image inside a div to be centered, but not the text inside
the div, you may need to place the image and text inside thier own divs.
Gus Richter
<span class="banner"><img style="display:block;margin:auto;" src="......
--
Gus
Bergamot
Gus Richter wrote:
> CJM wrote:
>>
>> I'd considered text-align, but I don't want the text part of it centered.
>>
>> So I wrapped the the whole lot in a <span> and set it's margins to auto
>> and it's width to 470px, but that didn't work either.
>
> <span class="banner"><img style="display:block;margin:auto;" src="......
The <span> is superfluous if its only content is the <img>.
--
Berg
Gus Richter
Actually it isn't the only content, but also contains subsequent text,
however, pursuant to your comment I checked without the pertinent SPAN
tags and it is not necessary, at least for Firefox.
--
Gus
CJM
Yes, I'd realised after posting that the span was inline, and that a DIV was
in order (or set the SPAN to display:block - counter-intuitive perhaps), but
I like Gus's suggestion (minus the SPAN!) and it worked a treat.
I might tinker with other variations on this approach, but the bottom line
is that I have a solution that definitely works to fall back on.
Thanks to you all.
Chris