PDA

View Full Version : Box in center of page


shield
11-08-2005, 01:34 PM
Ok heres what I want to do...

In css, have a div which is 300px wide by 120px with an image and two links inside it. I want it to be aligned center horizontally and aligned center vertically in all major browsers in 1024x768 & 800x600 resolutions...

How?

Thanks
CannonBallGuy
11-08-2005, 02:05 PM
Use this CSS for the div:

text-align:left;
border:2px solid #000000;
width:300px;
height: 120px;
margin:auto;
That will certainly center it horizontally, maybe not vertically though.
shield
11-08-2005, 03:23 PM
Yeah I was able to do the horizontal part... But the vertical part... Thats a problem ;)

Anyone know of any ways around it?
The vertical-align statement doesnt seem to work ;)
CannonBallGuy
11-08-2005, 06:34 PM
Yeah, Ok.
Have a gander at http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Although it didn't seem to work for me... :/
james.uk
11-09-2005, 10:33 AM
To align the box vertical use:-



#content_box{
padding-top:50%;
padding-bottom:50%
}


But in theory this works lol... you'll have to wait till i get home, and then ill write the code out.

you could possibley add this to the body class, yea i know its not a class but i cant think what its called.

body{
}
Nuvo
11-09-2005, 02:46 PM
If you had used percentile sizing, this would be childs play:


<html>
<head>
<style type="text/css" media="screen">
.centered { width: 50%; height: 20%; position: absolute: left: 25%; top: 40%; }
</style>
</head>
<body>
<div class="centered">
Div contents :D
</div>
</body>
</html>

Of course, some playing about with percentages would be required (this also has the advantage of working in a browser window of almost any size as it changes to fit).
Since you're using pixel widths, I don't know exactly how you'd go about getting good vertically centered results unless you use something like valign, which would suck as it's not CSS :/
kink
11-09-2005, 09:14 PM
try this


<div width="300" height="120" style="position:absolute; top: 50%; left: 50%;">
<img src="ax">
<a href="kkk">hello</a>
<a href="kkk">hello</a>
</div>
CannonBallGuy
11-10-2005, 11:18 AM
kink:
That makes the top left corner of the div centered.
shield
11-10-2005, 12:46 PM
CSS standards should be updated with a fix... lol