Welcome to WebmasterWorld Guest from 54.163.52.98

Forum Moderators: not2easy

Message Too Old, No Replies

Positioning an image using CSS

trying to get away from &nbsp

     

deltakits

5:09 pm on Oct 3, 2002 (gmt 0)



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 &nbsp 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!

SethCall

5:35 pm on Oct 3, 2002 (gmt 0)

10+ Year Member



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

#centeredimage{

width:20%;
left:40%;

top:10%; /* (or however high you want it) */

}
</style>

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)

deltakits

6:01 pm on Oct 3, 2002 (gmt 0)



Thanks Seth!

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.

dingman

6:09 pm on Oct 3, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



off the cuff, how about

.centered{
position: relative;
left: 50%;
padding-left: -50%;
}

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

SethCall

6:19 pm on Oct 3, 2002 (gmt 0)

10+ Year Member



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.
OH!
Use this too:
<Style>
#centeredimage{
position:absolute;
left:40%;
top:10%;
width:20%;
}

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

toadhall

6:46 pm on Oct 3, 2002 (gmt 0)

10+ Year Member



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>&nbsp;</p> following the image.</added>

deltakits

7:36 pm on Oct 3, 2002 (gmt 0)



Stupid question, but what is the format for a vspace? Never heard of it :(

Longhaired Genius

11:17 am on Oct 4, 2002 (gmt 0)

10+ Year Member



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.

toadhall

2:40 pm on Oct 4, 2002 (gmt 0)

10+ Year Member



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

deltakits

6:33 pm on Oct 4, 2002 (gmt 0)



Toadhall:

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

Thanks!

toadhall

7:40 pm on Oct 4, 2002 (gmt 0)

10+ Year Member



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.

martinibuster

8:17 pm on Oct 4, 2002 (gmt 0)

WebmasterWorld Administrator martinibuster is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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 &nbsp; you can just tell it to align=right, etc.

Birdman

9:25 pm on Oct 4, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Longhaired_genius said:
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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month