Topic: Centering an Image within a Block Element Pages that link to <a href="https://ozoneasylum.com/backlink?for=25002" title="Pages that link to Topic: Centering an Image within a Block Element" rel="nofollow" >Topic: Centering an Image within a Block Element\

 
Author Thread
robert_neville
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jan 2005

IP logged posted posted 02-13-2005 03:10 Edit Quote

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

Ensellitis
Bipolar (III) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 02-13-2005 07:03 Edit Quote

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

code:
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)

Ensellitis
Bipolar (III) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 02-13-2005 07:07 Edit Quote

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

skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

IP logged posted posted 03-28-2005 04:46 Edit Quote

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.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 03-28-2005 06:38 Edit Quote

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)

HZR
Bipolar (III) Inmate

From: Cold Sweden
Insane since: Jul 2002

IP logged posted posted 03-28-2005 10:58 Edit Quote
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.

skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

IP logged posted posted 03-28-2005 19:51 Edit Quote

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

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 03-28-2005 20:09 Edit Quote
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.

skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

IP logged posted posted 03-28-2005 20:42 Edit Quote

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!



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu