Topic: Centering an Image within a Block Element

I am trying to center an image within a div container on my page. The css code addresses this goal with margin-left: auto; margin-right: auto; text-align: center; the style is conveniently called div.ImageCenter. Now, I need to wrap my head around block level elements and how they influence the alignment. The CSS rule centers the div container within a block element rather than the ID container (#MainContent). In addition, my ArticleID float affects the block element?s right margin. I added a 1 px red border to illustrate the block level elements. As you can see, the image (excludes icon images) centers within the border; yet the border does always extend the full width of the #MainContent container. The <UL> tags influences the block level element or overall width used in the centering the div container. The situation has me all confused about the CSS logic.

How do I truly center the image within the #MainContent container (the full container not the block element)?

Should I clear the ArticleID float?

Could I center the image with a simple class on the <img> tag (other than Align=?center?)?

Could a position property like absolute or relative resolve the situation?

Please let me know if you have any additional suggestions about this situation. You may review the code at the following link.

http://www.geocities.com/robert_neville310/aquav1.html

For 1, you need to check out your page in IE, your nav is off and the margin auto doesn't work in IE. The best way to center a div in all browsers is using

margin-left:50%;

margin-right:50%;

left:-half the width of the div;

Note the "-"

Using text-align:center; in an image styling usually does the trick for me.



:: WWW || Contact || Deviations || ThoughtPrism ::

(Edited by Ensellitis on 02-13-2005 07:04)

And you should really look for a different host, Geocities sucks with the amount of advertising you have to have... There are alot of free hosts out there, or ones that charge very little and have little to no advertising. Like mine, I usually charge $15 a year...

And Geocities is causing bugs in that leveled nav of yours...



:: WWW || Contact || Deviations || ThoughtPrism ::

For a header ( in a large div) I always used the

margin-left: auto;
margin-right: auto;

BUT I discovered something just today..
I had an IMG set in the HEAD SECTION

__________________________________

img {
border: 0;
margin-left: auto;
margin-right: auto;
text-align: left;
}

img.b {
display: block;
}

______________________
AND in the BODY SECTION
______________________

<li><a href="#"><img class="b" src="yourown.gif" alt="home"/></a></li>
_____________________________________

This centered it where <li> was actually a div that was a fraction larger than the image...(about 5px on each side)

I was surprised! I haven't tried to do this in a different kind of div but it is worth mentioning...
I had "li" set to text-align center but it wasn't working in Nav or Mozilla..Not certain about IE..
(I haven't tried this with a standard <p class="?"><img class="b" src="your.gif" alt="home"/</p> or other divs yet)
Centering is tricky and if this works..it is one more trick in the bag!
It wasn't the Block or the text-align. It didn't center until I added the margin-auto part.

text-align only works for text.
That's why it's called "text-align"

Using "margin:auto;" is the standard method for horizontal centering of a block level element, requring the width of the object in question to be specified.

For the record: your <li> was not a div. An <li> is an <li>. A <div> is the only thing that is a <div>.



(Edited by DL-44 on 03-28-2005 06:38)

quote:

---

DL-44 said:

text-align only works for text.
That's why it's called "text-align"

---

Not only for text, but for all inline elements.

Yes..
However, li as....

li (width: 6.2em;font-size: 80%;text-align: left;margin: 0px;padding: 0px;list-style-type: none

LOOKS LIKE a DIV to me

Also..I took the auto-margin out..corrected a typo in the body of the document and that command did center that image in the *container?*

so..
It works simply written:

img {
border: 0;
text-align: center;
}

Now, barring typo's...As I understand that command -text-align -is applied to block level elements...not just text..but I am probably wrong

quote:

---

LOOKS LIKE a DIV to me

---

But it's not.

quote:

---

so..
It works simply written:

img {
border: 0;
text-align: center;
}

---

In some browsers it may work that way. It is not intended to, nor does it in all the major browsers.

quote:

---

As I understand that command -text-align -is applied to block level elements...not just text..

---

From the W3C -

quote:

---

This property describes how inline content of a block is aligned. Values have the following meanings:

---

Meaning that text-align determines the horizontal alignment of inline elements withing a block element.

So if you have a <p> (or a <div>, or any other block-level element), with "text-align:center;", the text within the paragraph will be centered, but the paragraph itself will not be affected by the declaration.

All right! That explains it...The command works on "li" because it is an inline element...and the block level has to be centered differently...ahhh sooo-->

To center the <p> or (div)..the commands are margin-auto or the 50% solution mentioned above.

Thank you..I finally understand that!

Next point...I haven't checked that img{border: 0;text-align: center;}..in all major browsers. Thanks for the HEADS UP. I am designing a graphic that needs "center." You saved me much time..if that command doesn't work properly!