How to center something horizontally AND vertically... on a page when working with CSS.
Requested by: simplyw00x
Situation: You've got a title/intro image or flash file or similar that you want your audience to see before they gain access to your website.
Situation: You want to make a site that sits in a box in the middle of your screen. The box's size must be uniform.
Okay, basically the situation is this. Despite all the great things about CSS and CSS2, the model is currently inherantly lacking when dealing with vertical values. CSS2 Provides no good means of vertically positioning an element on your website scalable design sense. You can of course specifiy a distance from the top , and sides of the browser window, but of course, your browser windows change sizes... leaving you with a serious lack of symmetry on people with computers better/worse than the norm.
So first, lets get what we can do out of the way.
Positioning Elements Horizontally:
Positioning elements horizontally was actually considered in the design of CSS2, which helps us a great deal, however its a little less obvious than just some sort of center div command. What you have to do is set the left and right margins of the element to auto. The CSS2 Specification states that when left and right margins are set to auto they should even out centering your element horizontally.
So here is the CSS:
And should you not know it already, here is the XHTML to sit between your body tags:
Here we're working with a 500*500 red box named "#some-element".
Aside: In most situations, when centering anything on a page it is good practice to place it inside a div element and center that, rather than setting the image tag's margins to auto, or making a class for the image. It all comes down to defining the layout before you enter content (perhaps another request?)
Anyway, this code should work on all your modern day browsers, so we can leave it at that right?
No. no we cant. Because what you'll find is that some large percentage of the worlds population still use a little program called Internet Explorer by a little company called Microsoft. I wont go into the bashing routine here, but suffice to say that Microsofts buisness plan is this, (as many successful business's plans are) To make the most money from the least overhead. You dont need to keep up with standards like CSS if your browser is taped to the worlds most used operating system.
So, it doesn't work in internet explorer, but there is a little tweak that does. Assuming that #some-element is positioned relatively (which is the default), you'll find that by making the element that contains it (be it "body" or some other div) have a text-align setting of center, the M$ factor will be solved. Internet explorer treats elements in the relative positioning context in an "in-line" way. That is, they are formatted using the same mechanisms as the text, hence, text-align will affect your div element.
So here is our new CSS:
You now have a red box thats beautifully centered horizontally on Firefox, Opera, Internet Explorer, and most other browsers.
Positioning Elements Vertically:
Now that we have our horizontal alignment, we need our vertical alignment right? So first we have to go over a few things. Firstly, CSS2 does not contain any mechanism for vertical centering properly. Even with a thousand tweaks, vertical alignment using CSS2 just doesn't work-- I've tried. Funnily enough, XHTML Strict also doesn't contain the nessacery functions to perform this action. As such, if you want to center an object on your screen you need to use XHTML Transitiional or HTML-- thats just the way the cookie crumbles.
So basically our workaround is this. Just inside the body, we will create a table which will center the object vertically. This will take us 2 lines of our entire code, and shouldn't look messy when we're done.
So here is our XHTML code: (I've included the body tags for the sake of showing you how I'd do it)
Above is the code that is going to set us up with the vertical centering. Basically what we've got is a table which is 100% of the page (width and height), within the table is a row (<tr>) that is vertically aligning the cell in which our element is sitting.
So that is about it. You can put anything you like inside that box. Hell, you could include your phpbb (or other) forum inside one of those babies. The uses are limitless. Hopefully you've gleamed a little bit of knolwedge from this guide... If you have any further questions, about the code etc. feel free to ask here. If you have any other questions you would like made into a guide visit the thread below.
http://www.frihost.com/forums/viewtopic.php?t=11766
Aside: I'm very hopeful that CSS3 is going to make the latter part of this guide redundant. I have not however read through the whole current design specification, and I havent seen anything yet to indicate that it will. This technique will ALWAYS work.
Note: Either of these techniques can be used independently of each other.
Cheers.
Ash.
Last edited by Ashims on Sun Oct 09, 2005 1:31 pm; edited 2 times in total
Requested by: simplyw00x
Situation: You've got a title/intro image or flash file or similar that you want your audience to see before they gain access to your website.
Situation: You want to make a site that sits in a box in the middle of your screen. The box's size must be uniform.
Okay, basically the situation is this. Despite all the great things about CSS and CSS2, the model is currently inherantly lacking when dealing with vertical values. CSS2 Provides no good means of vertically positioning an element on your website scalable design sense. You can of course specifiy a distance from the top , and sides of the browser window, but of course, your browser windows change sizes... leaving you with a serious lack of symmetry on people with computers better/worse than the norm.
So first, lets get what we can do out of the way.
Positioning Elements Horizontally:
Positioning elements horizontally was actually considered in the design of CSS2, which helps us a great deal, however its a little less obvious than just some sort of center div command. What you have to do is set the left and right margins of the element to auto. The CSS2 Specification states that when left and right margins are set to auto they should even out centering your element horizontally.
So here is the CSS:
| Code: |
| #some-element{
background: red; width: 500px; height: 500px; margin-left: auto; margin-right: auto; } |
And should you not know it already, here is the XHTML to sit between your body tags:
| Code: |
| <div id='hat'>
</div> |
Here we're working with a 500*500 red box named "#some-element".
Aside: In most situations, when centering anything on a page it is good practice to place it inside a div element and center that, rather than setting the image tag's margins to auto, or making a class for the image. It all comes down to defining the layout before you enter content (perhaps another request?)
Anyway, this code should work on all your modern day browsers, so we can leave it at that right?
No. no we cant. Because what you'll find is that some large percentage of the worlds population still use a little program called Internet Explorer by a little company called Microsoft. I wont go into the bashing routine here, but suffice to say that Microsofts buisness plan is this, (as many successful business's plans are) To make the most money from the least overhead. You dont need to keep up with standards like CSS if your browser is taped to the worlds most used operating system.
So, it doesn't work in internet explorer, but there is a little tweak that does. Assuming that #some-element is positioned relatively (which is the default), you'll find that by making the element that contains it (be it "body" or some other div) have a text-align setting of center, the M$ factor will be solved. Internet explorer treats elements in the relative positioning context in an "in-line" way. That is, they are formatted using the same mechanisms as the text, hence, text-align will affect your div element.
So here is our new CSS:
| Code: |
| body{
text-align: center; } #some-element{ background: red; width: 500px; height: 500px; margin-left: auto; margin-right: auto; } |
You now have a red box thats beautifully centered horizontally on Firefox, Opera, Internet Explorer, and most other browsers.
Positioning Elements Vertically:
Now that we have our horizontal alignment, we need our vertical alignment right? So first we have to go over a few things. Firstly, CSS2 does not contain any mechanism for vertical centering properly. Even with a thousand tweaks, vertical alignment using CSS2 just doesn't work-- I've tried. Funnily enough, XHTML Strict also doesn't contain the nessacery functions to perform this action. As such, if you want to center an object on your screen you need to use XHTML Transitiional or HTML-- thats just the way the cookie crumbles.
So basically our workaround is this. Just inside the body, we will create a table which will center the object vertically. This will take us 2 lines of our entire code, and shouldn't look messy when we're done.
So here is our XHTML code: (I've included the body tags for the sake of showing you how I'd do it)
| Code: |
| <body>
<table width="100%" height="100%"><tr valign="middle"><td> <div id='hat'> </div> </td></tr></table> </body> |
Above is the code that is going to set us up with the vertical centering. Basically what we've got is a table which is 100% of the page (width and height), within the table is a row (<tr>) that is vertically aligning the cell in which our element is sitting.
So that is about it. You can put anything you like inside that box. Hell, you could include your phpbb (or other) forum inside one of those babies. The uses are limitless. Hopefully you've gleamed a little bit of knolwedge from this guide... If you have any further questions, about the code etc. feel free to ask here. If you have any other questions you would like made into a guide visit the thread below.
http://www.frihost.com/forums/viewtopic.php?t=11766
Aside: I'm very hopeful that CSS3 is going to make the latter part of this guide redundant. I have not however read through the whole current design specification, and I havent seen anything yet to indicate that it will. This technique will ALWAYS work.
Note: Either of these techniques can be used independently of each other.
Cheers.
Ash.
Last edited by Ashims on Sun Oct 09, 2005 1:31 pm; edited 2 times in total
