homepage Welcome to WebmasterWorld Guest from 50.19.169.37
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Positioning an image using CSS
trying to get away from &nbsp
deltakits




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




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

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




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




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

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




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

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




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

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




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




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

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




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

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




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




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

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




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

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




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved