...

View Full Version : Centering Images in css help



tokio
02-22-2009, 04:15 PM
Im trying to center two images on my site by using css instead of using the deprecated <center> tag in html. So i made a div, added in some information and it now it looks distorted. Any links to tutorials on centering images. Would there happen to be an option in float o do this, or do float just move objects left and right? Thanks.

WillyR
02-22-2009, 04:31 PM
Uhm could you link us to your site?

Excavator
02-22-2009, 05:44 PM
Hello tokio,
You don't give us much to go on.
Are you talking about vertically or horizontally centering them?

Either way, we'll need to see your code. A test link would be best but to post code here in the forum, please use the code tags. (the * button in the edit post window)

tokio
02-22-2009, 06:31 PM
Hello tokio,
You don't give us much to go on.
Are you talking about vertically or horizontally centering them?

Either way, we'll need to see your code. A test link would be best but to post code here in the forum, please use the code tags. (the * button in the edit post window)

Im building everything from my local machine and my site is too bland to go live now. I would like to vertically center it.



#picture {

position: absolute;
top: 50%
left: 50%
width: 200px;
height: 200px;
margin: -100px 0 0 -150px;
background: #ccc;
}

Excavator
02-22-2009, 06:33 PM
Some vertical center demos here - http://nopeople.com/CSS/vertical%20center%20with%20CSS/

View the source to see how it's done.

tokio
02-22-2009, 09:13 PM
Some vertical center demos here - http://nopeople.com/CSS/vertical%20center%20with%20CSS/

View the source to see how it's done.

Thanks bud, but i did some searching before i posted this and saw that link and did try to reverse engineer the code but couldnt get it to work. Im kind of confused about how exactly dimensions work.

WillyR
02-22-2009, 09:22 PM
-removed-

marilynn.fowler
02-22-2009, 09:23 PM
give the images IDs, then you can use CSS's margin attribute to center them

In the CSS:


#pony, #cow {
display: block;
margin: 5px auto; }


When you only use two values, the first one is for top and bottom, the second one is for right/left. In this case there will be 5 pixels of margin on the top and bottom, and auto means evaluate the width of the containing element and set the margin accordingly. Because a value was not given for either left or right, it will automatically center it.


In the body


<img id="pony" src="pony.jpg" alt="pony">
<img id="cow" src="cow.gif" alt="cow">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum