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