FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


How to center something horizontally AND vertically...





Ashims
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:
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.
simplyw00x
You, sir, are an absolute legend.
littlegiant
With all due respect, if you're going to use a table anyways, wouldn't it be easier to just use the align="center" attribute/value pair in the <td>...</td> tags? Might as well put the valign attribute in there as well. Example:

Code:
<table height="100%" width="100%"><tr><td valign="middle" align="center"><div class="whatever">Content...</div></td></tr></table>


Simple, no?

You appear to be using a sledgehammer to tap in a carpet tack.
Grimboy
No, we're all meant to think tables are crap and praise css. Even if it makes something that should be really simple quite hard.
Rhysige
tables have their uses but IMO it doesnt come in formatting of a page. However using exact values with CSS wont work but perhaps using %'s? it should therefore stay standard accross screen sizes.
bnbrown
It is the code I use :
Code:
<table height="100%" width="100%"><td align="center">content</td></table>


But I understand your viewpoint Mr Ash Laughing
Ashims
Quote:
With all due respect, if you're going to use a table anyways, wouldn't it be easier to just use the align="center" attribute/value pair in the <td>...</td> tags?


Yes Indeedy. It is, I should have documented it as an alternative. The point as I see it (to the question that is) is to have as much of the page css as possible. As such, that is what I'd do. HTML editing/tweaking is MUCH harder then CSS if you have the right tools.

Quote:
tables have their uses but IMO it doesnt come in formatting of a page. However using exact values with CSS wont work but perhaps using %'s? it should therefore stay standard accross screen sizes.


Let me assure you that there is absolutely no way of centering elements vertically in css. As I said, this is your best option when going for the CSS-centric design approach. Its also paving the way for having the damn thing working when a vertical align function IS added to CSS. :p

Quote:
It is the code I use...


Does that center code vertically on your page? Maybe it does some of the time, however, the problem with your code is that you havent specified that it should always be centered... you're relying on browsers defaults for your design-- never rely on browsers. ^_^

So yeah. Smile

Cheers All.
Ash.[/code]
eday2010
Personally, using a table to centre one item in the middle of the page so it's centered even if the user resizes the window is the easiest way to do it. It's also a good idea to take the margins away from the edges of the page in te body tag, as follow:

Code:
<body topmargin=0 bottommargin=0 leftmargin=0 rightmargin=0>


What's that, you say? That doesn't work with Netscape/Firefox? That's ok, add the following:

Code:
<body topmargin=0 bottommargin=0 leftmargin=0 rightmargin=0 marginheight=0 marginwidth=0>


Marginheight/marginwidth is that the Mozilla-based browsers recognize. It won't recognize ther
Code:
topmargin
and so on commands, and IE won't recognize the marginheight/width. So sticking them all together will ensure mutiple browser compatibility. Sure is easier than using CSS to centre something. I would't go about putting a table around all your pages that have multiple items and text on it. It's good for an intro page or something of that sort.
Related topics
frame stuff
Ashens Web Design Questions Thread
Center Picture
Comments on design
CSS - CSS Tutorial for skin maker
Vertically centering site in window using CSS?
Help With Positioning Background Image.
html help plz
how can i make my website background show correctly
Centering iFrames
Overflow
Center ul horizontally
Three Point Circle
Add Coins to Top of Page
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.