|Positioning an image using CSS|
trying to get away from
Anyone know how to center an image using CSS? I just started using CSS for the site in my profile, and would like to get rid of the many   tags to push my top image to the center.
I suppose it doesn't HAVE to be CSS, just something clean & simple.
Thanks in advance!
ok there are many ways to do this.
One: (this requires you to size your image, and it wont stay its "true" size, but play with the percentages to get it to the size you want)
so you have <img src="blah.jpg" id="centeredimage">
in your css file, or in your style header
top:10%; /* (or however high you want it) */
1. There are only 2 values here: first choose a width of the image (the value u have to play with to get it to the right size)
2. ok now: if you are familiar with css, this means that the image's width will take up 20% of the screen. The height will adjust proportionatly, so dont mess with it. Now, you can also use percentages to establish where the far left pixel of the image will be positiioned. I chose 40%, because 40% + 20% +40% = 100%. So, it has to be 40% from the left of the screen.
If this isn't a perfectly clear explanation, just mess with the width and left percentages. If you leave off the percentage sign, it will use pixels instead.
The reason this is a decent method is because it will render the same in ANY resolution (grab the edge of your window and watch the image stay the same proportions no matter what size you make your window)
I tried doing that, and I could adjust the width of it, but it just stayed connected to the left side. Also, when I resized my window it shrunk the image.
The image that I have now is already the best size, I just need to pull it to the center.
off the cuff, how about
If padding-left: -50% doesn't work, try margin-left: -50%. I've never done this, but I recall reading about it somewhere.
The trick is supposed to work by setting the left edge of the image to be half-way across the containing box, and then off-setting the image by half of its own width in the other direction. I'm not sure off the top of my head whether margin or padding get their widths set as % of the object they apply to to % of the containing box that object is inside.
Hope that helps
Whoa! Its "stuck"? Strange....
You sure you got that "left:40%;" in there? Btw, try without the % just to see if it will come of that edge.
um, also, is your image in a div? that shouldn't matter either.
Use this too:
And, sorry, when you resize your window to smaller, its SUPPOSED to make your image smaller ;) So, if you had EVERYTHING in %, then no matter what size your page is, everything is in its right place. Its a style decision. Basically, if your page can been easily seen in 800*600, then you know it can scale up comfortably, and if anyone is using 640 *480, well... they need to hop back into their time machine and stop messing with the space-time continuum ; )
So, yes, if you make your window 400 *320, its going to look silly :) like a "mini-webpage" :)
hspace will replace all those no-break spaces.
<img src="mylogo.gif" hspace="60">
... will put 60 pixels space to the left and right of the image.
Or put the logo into a data cell spanning the top row of your existing table and align=center.
CSS is sexier though. ;)
<added>a vspace can replace the double <p> </p> following the image.</added>
Stupid question, but what is the format for a vspace? Never heard of it :(
The proper way to centre a div in css is with "margin: auto;". This elegent fragment of code will plonk it top and centre of the viewport. To use it on an image you have to make the image block-level with "display: block;".
Now here's the bad news: IE5 does not support this, so presently it's of purely academic interest, but try it in Mozilla or Opera to see how it should work.
Here's a css method that works in IE5 and and Netscape 4, similar to toadhalls's above:
Images are inline-level by default so if you style a div "text-align: center;" your image will sit neatly in the middle of it. This is what I would do with your logo.
>...the format for a vspace (?)
Same as for hspace.
<img src="logo.gif" hspace="60" vspace="60">
... will put a 60 pixel space (margin) around the image.
That puts a space above the image...Anything that will put it below? The next thing below it is a table, and I can't seem to move the table down. If you can't tell, i'm very new at all programming languages :)
You could just create another row at the top of the table for your logo to sit in and add a column span (colspan=2) to the cell so it sits right, then align the logo to the center of the cell (align=center). Nevermind the hspace or vspace.
I love playing around with the TD align for horizontal and vertical. You can push things to the bottom of a cell, to the right or to the center. Nice.
Also, instead of you can just tell it to align=right, etc.
|div "text-align: center;" |
That seems easy enough to me. If you have a fixed width page you can just set the left margin value to center the image and then use a <br /> and continue with the page.