Centering Image in <DIV>

I've inserted a new banner in an existing page and I want the banner image
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

re: Centering Image in <DIV>

On 2 Oct, 17:41, "CJM" <cjmn...@removeme-yahoo.co.ukwrote:
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 <imgwith default CSS
settings) will respond to setting text-align on their parent (i.e. the
<div>) instead.

re: Centering Image in <DIV>

"Andy Dingley" <dingbat@codesmiths.comwrote in message
news:4ff25660-ff45-43d0-afa3-9c914f5192f3@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 <spanand set it's margins to auto and
it's width to 470px, but that didn't work either.

re: Centering Image in <DIV>

CJM wrote:
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 <divcontainer.

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

re: Centering Image in <DIV>

Gazing into my crystal ball I observed "CJM" <cjmnews04@example.com>
writing in news:6kkdj4F8a956U1@mid.individual.net:
@m74g2000hsh.googlegroups.com.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

re: Centering Image in <DIV>

CJM wrote: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.

re: Centering Image in <DIV>

CJM wrote:
<span class="banner"><img style="display:block;margin:auto;" src="......

--
Gus

re: Centering Image in <DIV>

Gus Richter wrote:The <spanis superfluous if its only content is the <img>.

--
Berg

re: Centering Image in <DIV>

Bergamot wrote:
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