Centering Image in <DIV>

Gazing into my crystal ball I observed "CJM" <cjmnews04 (AT) example (DOT) com>
writing in news:6kkdj4F8a956U1 (AT) mid (DOT) individual.net:

"Andy Dingley" <dingbat (AT) codesmiths (DOT) com> wrote in message
news:4ff25660-ff45-43d0-afa3-9c914f5192f3
@m74g2000hsh.googlegroups.com.
..
On 2 Oct, 17:41, "CJM" <cjmn... (AT) removeme-yahoo (DOT) 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

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

On 2 Oct, 17:41, "CJM" <cjmn... (AT) removeme-yahoo (DOT) 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.

CJM wrote:

"Andy Dingley" <dingbat (AT) codesmiths (DOT) com> wrote in message
news:4ff25660-ff45-43d0-afa3-9c914f5192f3 (AT) m74g2000hsh (DOT) 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

CJM wrote:

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.

CJM wrote:

"Andy Dingley" <dingbat (AT) codesmiths (DOT) com> wrote in message
news:4ff25660-ff45-43d0-afa3-9c914f5192f3 (AT) m74g2000hsh (DOT) googlegroups.com...
On 2 Oct, 17:41, "CJM" <cjmn... (AT) removeme-yahoo (DOT) 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 class="banner"><img style="display:block;margin:auto;" src="......

--
Gus

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

On 2008-10-02, Scott Bryce <sbryce (AT) scottbryce (DOT) com> wrote:

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

It does make sense and you can do it-- by setting text-align on the
container.

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.

I think the easiest thing here, as has been suggested, is to get rid of
the span altogether and give the img display: block and auto left and
right margins.

Bergamot wrote:

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>.

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