myownslave Posted July 6, 2006 Share Posted July 6, 2006 Hi,I want to be able to fit my full page into the smallest screen resolution (800x600), but then when being used on a higher resolution, I want it to centre-align instead of aligning from the left, which leaves a big gaping hole on the right-hand side of the screen. So is there any way of aligning a style sheet to the centre? The code I'm using at the moment is something like: #CONTENT { position:absolute; top:200px; left:0px; right:0px; bottom:0px; height:65%; width:800px; padding:20px; overflow:auto; background:#FFFFFF; } Thanks in advance,Jim Link to comment Share on other sites More sharing options...
pulpfiction Posted July 6, 2006 Share Posted July 6, 2006 Is this somthing you are looking for....http://www.jakpsatweb.cz/css/css-vertical-...r-solution.html Link to comment Share on other sites More sharing options...
qwew Posted July 6, 2006 Share Posted July 6, 2006 I have more or less thesame problem. Something like <style>body{float:center}</style> but with syntax that actually works. Is there any way to use style sheets to center your entire page independant of what resolution is being used?Kinda like how <table align="center"> used to work.edit: Is this somthing you are looking for....http://www.jakpsatweb.cz/css/css-vertical-...r-solution.html<{POST_SNAPBACK}> Yeah that but horizontally. Is there no pretty way to code this, it seems dodgy? Link to comment Share on other sites More sharing options...
myownslave Posted July 6, 2006 Author Share Posted July 6, 2006 Is this somthing you are looking for....http://www.jakpsatweb.cz/css/css-vertical-...r-solution.html<{POST_SNAPBACK}> I'm new to CSS so not completely up to date with classes and the like. Just looking to use the simple command in each style sheet for the moment. Only realising now that it's horizontal centering that I'm looking for and not vertical!Anyway, I tried both horizontal-align: middle; (although not even sure if this is a valid command)and vertical-align: middle;but neither seemed to work - here is an example of my code: #CONTENT { position:absolute; vertical-align: middle; horizontal-align: middle; height:100%; width:750px; padding:20px; overflow:auto; background:#FFFFFF; } but even still, the style sheet is located in the top-left of the screen, even when I use position:relative;Jim Link to comment Share on other sites More sharing options...
myownslave Posted July 6, 2006 Author Share Posted July 6, 2006 Just to clarify, it is centre-aligning as far as left to right is concerned, not as far as up and down is concerned. Not sure whether you'd call that vertical alignment or horizontal alignment, but I'm sure you get the idea! Link to comment Share on other sites More sharing options...
qwew Posted July 6, 2006 Share Posted July 6, 2006 I fiddled around a bit more and this is what I found. body{text-align: center} This effectively places anything in the center, but for some reason when I add the following div{width: 800px} and start using the div tags in my page, they automatically left-align again. Is there any way to keep a division with a set width and center it at thesame time? Link to comment Share on other sites More sharing options...
zanfranceschi Posted July 7, 2006 Share Posted July 7, 2006 I think I know what you want... <html><head> <style type="text/css"> body { text-align: center; } #wrapper { text-align: left; width: 760px; /* This is good for 800 x 600 */ margin: 0 auto; /* The magic */ border: 1px solid #000; /* If you want to see the boundaries */ } </style></head><body> <div id="wrapper"> Hi there! </div></body></html> Link to comment Share on other sites More sharing options...
yoshida Posted July 7, 2006 Share Posted July 7, 2006 EDIT: zanfranceschi Ninja'd me by about 5 hours. Stupid me...{margin-left: auto;margin-right: auto}This works with Firefox.If divs are placed between body tags (which I assume they are):body {text-align: center;}This works for Internet Explorer. I always use both to center a div. You can re-specify text-alignment in the div itself.This still causes your div to be in the top-center of the screen, while you'd like to have it dead-center. You 'should' be able to create a div that fills the window (let's call it a container), background white, no border.Specifications: # container {text-align: center;height: 96%;width: 96%;background-color: #ffffff;}# content {width: 700px;height: 500px;margin-left: auto;margin-right: auto;margin-top: auto;margin-bottom: auto;text-align: left;} Don't take my word for it, but fiddle around to see if this does what you would like it to do.(note: making the container too big may result in double scrolling, making the container too small may result in the content being off-center) Link to comment Share on other sites More sharing options...
qwew Posted July 7, 2006 Share Posted July 7, 2006 That worked for me, thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now