To accomplish what I am looking for (the image centered in it's parent top 'centered') I have done this:
-
<div id="backing">
-
<div id="lbImgBacker">
-
<center>
-
<img id="Image1" src="banner.JPG" alt="" style="border-width:0px;" />
-
</center>
-
</div>
-
<div id="ExampleLeftAlignElement" ></div>
-
<!-- other elements and the rest of the page -->
-
</div>
-
The following CSS is also applied
-
#backing
-
{
-
z-index: 100;
-
position: static;
-
display: block;
-
width: 760px;
-
background-color: #faebd8;
-
text-align:left;
-
}
-
#Image1
-
{
-
z-index: 100;
-
display: block;
-
height: 127px;
-
width: 756px;
-
border-width: 0px;
-
cursor: pointer ;
-
}
-
-
#lbImgBacker
-
{
-
z-index: 100;
-
position: static;
-
display: inline;
-
text-align: center;
-
width: 760px;
-
height: 130px;
-
color: #804000;
-
background-color: Transparent;
-
font-weight: bold;
-
font-size: 12pt;
-
}
-
The "text-align:left" in #backing is required for the rest of the page, and seems to override any child styles I attemp to apply.
For arguments sake, "lbImgBacker" is the same width as "backing" and doesn't matter if the text-align is left/center/right. But the image INSIDE "lbImgBacker" should be centered inside of it. This is what I cannot seem to do with style properties. That <center> tag is the only thing that does it, but is not allowed by W3 to be there.
Do I have an alternataive?
