Centering Image in

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

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:

And the key stylesheet is:

The containing DIV has the following styling:

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

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.


Re: Centering Image in

Quoted text here. Click to load it

CSS has two notions of "centring"

Block-behaving elements will center if you set their own margins to

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.

Re: Centering Image in

Quoted text here. Click to load it

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.

Re: Centering Image in

Quoted text here. Click to load it
Quoted text here. Click to load it

Span is inline.  Use a block level element, or display an inline element
as block.

Adrienne Boswell at Home
Arbpen Web Site Design Services
Please respond to the group so others can share

Re: Centering Image in

CJM wrote:

Quoted text here. Click to load it

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?


     "Of course it is happening inside your head, Harry, but why on earth
should that mean that it is not real?"           --Albus Dumbledore Latest: 01-Oct-2008

Re: Centering Image in

CJM wrote:
Quoted text here. Click to load it

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

CJM wrote:
Quoted text here. Click to load it

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


Re: Centering Image in

Gus Richter wrote:
Quoted text here. Click to load it

The <span> is superfluous if its only content is the <img>.


Re: Centering Image in

Bergamot wrote:
Quoted text here. Click to load it

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.


Re: Centering Image in

To all,

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.


Site Timeline