[SOLVED] Problems with centering in CSS.

mcdanielnc89 · #1 (**permalink**) Oct 30th, 2007, 02:56

Okay, I have tried everything people. lol... It's starting to get agrivating, lol...

For css I have tried,

img {
 border: none;
 align: middle;
}

HTML: Select all

img.displayed {
 display: block;
 margin-left: auto;
 margin-right: auto;
}

HTML: Select all

#centeredimage { 
position: relative; 
left: 50%; 
margin-left: -50%;
}

So finally I tried

HTML: Select all

 <center>
  <img src="images/rules/Jesus01.gif" alt="Rules Bottom logo"
  width="180" height="179">
  </center>

And that worked but it's depreciated....

Any help?

Monie · #2 (**permalink**) Oct 30th, 2007, 03:22

Can't help you since you did not include your HTML code, and you did not specify your question clearly..

Try posting the complete file (HTML, CSS, whatsoever..) and you will get a much more quick response..

P/S: Do you know the magic word margin: 0 auto;?

mcdanielnc89 · #3 (**permalink**) Oct 30th, 2007, 03:47

The one with <center></center> is my html code for it. i tried it with the css version but them used the <center> tags as that's the only thing that worked. And no I'm not sure what u mean my the magic word...

Monie · #4 (**permalink**) Oct 30th, 2007, 03:55

All you need to si is to put your image inside a div and set the div margin reffer to the magic word

Something like this:

HTML: Select all

#image {
margin 0 auto; /*center your image horizontally*/
width: auto; /*depends on your image size*/
height: auto; /*depends on your image size*/
}

HTML: Select all

<div id="image">
<img src="http://www.webforumz.com/images/rules/Jesus01.gif" alt="Rules Bottom logo"  width="180" height="179">
</div>

mcdanielnc89 · #5 (**permalink**) Oct 30th, 2007, 05:38

it's weird. that do'nt even work.
here's the page it's on.l http://newbreedjesusfreaks.com/index.php?page=rules

Monie · #6 (**permalink**) Oct 30th, 2007, 05:52

it basically center the #image div, not the image inside it..

mcdanielnc89 · #7 (**permalink**) Oct 30th, 2007, 06:04

Quote:

Originally Posted by monie

it basically center the #image div, not the image inside it..

what? if that's the case why wouldll the image even center?

Monie · #8 (**permalink**) Oct 30th, 2007, 06:08

In that case, set the #image div width and height to the size of your image. If you don't specify them, the #image div will expand into it's parent div size.. that would be your #content3 div.. there you go..

HTML: Select all

#image {
    margin: 0 auto;
    width: 182px;
    height: 182px;
}

you might want to try giving your div a border so that you could see where they are in your page, just for testing tho..
Now you know what is the magic word huh?

MikeHopley · #9 (**permalink**) Oct 30th, 2007, 07:22

This comes up again and again.

<img>s are inline elements. To centre something, it must be formatted as a block-level element.

You can either put a <div> (these are block-level) around it as monie suggested, and centre the <div>; or you can use the CSS:

Code: Select all

#image {
display: block;
margin: 0 auto;
}

You do not need to specify a width/height in the CSS. These are in the HTML.

I looked at your CSS, and I could not find any style rules relating to #image. I did find a lot of absolute positioning, however, which will cause you problems because, frankly, you don't have the skill to use it. The Lord moves in mysterious ways!

Monie · #10 (**permalink**) Oct 30th, 2007, 07:37

What a funny reply there Mike..

I did not know myself about the display: block; until you mention it! Thanks Mike, I learn something new today.

My solution will also work but not effective enough.
The real solution is what you have posted. Thanks..

Now we have another magic word for today: { display: block; }

MikeHopley · #11 (**permalink**) Oct 30th, 2007, 08:02

Quote:

Originally Posted by monie

What a funny reply there Mike..

I did not know myself about the display: block; until you mention it! Thanks Mike, I learn something new today.

My solution will also work but not effective enough.
The real solution is what you have posted. Thanks..

Now we have another magic word for today: { display: block; }

Actually, there are occasions when your solution would be better. Specifically, when the <img> is a child of the <body>.

Since <img> is an inline element, and remains an inline element no matter how we change the formatting rules, you will get validation errors when the <img> is a direct child of the <body> -- because every inline element must have some block-level ancestor.

Of course, you can also fix all such errors forever by using a wrapper <div>, and most sites have several wrapper <div>s anyway.

Monie · #12 (**permalink**) Oct 30th, 2007, 08:10

OIC... Thats another knowledge I get from you

Thanks again..

mcdanielnc89 · #13 (**permalink**) Oct 30th, 2007, 17:12

LOL, you guys are too funny, lol... (I think that's why I like this site so much, lol.)

Marc · #14 (**permalink**) Oct 30th, 2007, 17:14

Have you got this sorted yet?

mcdanielnc89 · #15 (**permalink**) Oct 30th, 2007, 17:19

I'm not at home so I cannot do anythig yet. I am waiting for my mom to come get me. lol...

Marc · #16 (**permalink**) Oct 30th, 2007, 17:20

Lol... Ok. If you encounter any problems, gimme a shout!!

Monie · #17 (**permalink**) Oct 31st, 2007, 02:27

I have tried both way, and conformed it is working...
Now its up to you to test them..

mcdanielnc89 · #18 (**permalink**) Oct 31st, 2007, 04:48

Okay,

So for the CSS if i put

HTML: Select all

#image {
 display: block;
 margin: 0 auto;
}

then for my HTML piece I would put

HTML: Select all

 <div id="image">
  <img src="http://www.newbreedjesusfreaks.com/images/rules/Jesus01.gif" alt="Rules Bottom logo"  width="180" height="179">
  </div>

Correct?

Monie · #19 (**permalink**) Oct 31st, 2007, 05:02

Wrong..!

HTML: Select all

#image .myimage{ /*Give your img a class and set it to display block here*/
display: block;
margin: 0 auto;
}

<div id="ThisIsYourParentDiv, you can set it to margin 0 auto to center them as well">
    <img class="myimage" src="http://www.newbreedjesusfreaks.com/images/rules/Jesus01.gif" alt="Rules Bottom logo" width="180" height="179">
</div>

mcdanielnc89 · #20 (**permalink**) Oct 31st, 2007, 05:14

HTML: Select all

#centeredmage .image1 {
 display: block;
 margin: 0 auto;
}

HTML: Select all

<div id="centeredimage">
    <img class="image1" src="http://www.newbreedjesusfreaks.com/images/rules/Jesus01.gif" alt="Rules Bottom logo" width="180" height="179">
</div>

this?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Centering Vertically	R8515198	Web Page Design	5	Dec 6th, 2007 11:05
[SOLVED] page centering issues	VanderBOOM	Web Page Design	12	Dec 4th, 2007 15:06
[SOLVED] Centering horizontally and vertically	Emzi	Web Page Design	4	Nov 1st, 2007 16:07
[SOLVED] Centering!	mcdanielnc89	Web Page Design	20	Oct 21st, 2007 22:02
Tip : Vertical and Horizontal Centering - Solved!	gwx03	Web Page Design	0	Dec 15th, 2003 06:11

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] Problems with centering in CSS.