PDA

View Full Version : Center, Center, alignment Question


Sloth_Boy
06-14-2005, 11:20 AM
Well, i want to make the contents of my home page centered both Horizontally and Vertically, the horizontal alignment is easy, but the vertical alignment i dont even know if its possible, i know you can use vertical align in table cells, but can i do it just on the page with CSS or html...

Jusy help me with this ay...

domedia
06-14-2005, 03:08 PM
Try something like this. Without knowing the content of your website (structure) it's guessing a little.

The CSS:<style type="text/css">
img {
position: absolute;
left: 50%;
top: 50%;
margin-top: -30px;
margin-left: -30px;
}
</style>

HTML: <div><img src="img.gif" width="60" height="60"></div>

Note that the margins are half the value of the corresponding size in the image.

Sloth_Boy
06-15-2005, 07:09 AM
ok, it works... but, can i center text at all, or does it have to be images, and, could i sue flash instead of an image...

Check out how these guys have done it shogun.org ('http://shogun.org')

Hopefully they introduce and Verticall Center option for a page and not just for the contents of a table...

Anyway, thansk fro the help and just answer those questions above!

Cheers

Sloth_Boy
06-15-2005, 01:00 PM
Just incase someone else uses this...

Say the image size you were using is 120px wide and 60px high...Then...

.Name of Style {
position: absolute;
left: 50%; //dont need to change this at all, no matter wat the image size.
top: 50%; //dont need to change this at all, no matter wat the image size.
margin-top: -40px; //set this to 2/3 of the images height
margin-left: -60px; //set this to 1/2 of the images width
}


For my site, SiliconJunkie ('http://www.siliconjunkie.com.au') which has an image that is 700px wide, and 114px high, i'd use this CSS style...

.Name of Style {
position: absolute;
left: 50%;
top: 50%;
margin-top: -76px;
margin-left: -350px;
}


Your way domedia, u said half both the top-margin and the left-margin, but that makes it a little lower than center, it must be 2/3's

anyway, just thought id add that then... thanks heaps domedia, but it would be good if they could include a valign for the page layout...

Note: The Image may not center Vertically or Horizontally until you preview the page in your browser

Cheers!!!

domedia
06-15-2005, 03:12 PM
Great code, thanks Sloth Boy! B)

Sloth_Boy
06-16-2005, 01:50 AM
Thankyou for giving ti to me... lol, i only made a small adjudtment,

Cheers!!!

also, would you happen to know when the next version of html will come out???

gmcrone
06-16-2005, 09:23 PM
HTML 4.1 was the last version of HTML, no new versions to come.

The new standard is XHTML currently at version 1.1


Mike...