L.Adlon Posted June 14, 2014 Share Posted June 14, 2014 (edited) Hi... I know this is a topic that has been going on for a long time, but it's driving me nuts. I've read the info on it, but it just doesn't seem to (always) be working for me... I've been trying very hard to move myself completely into proper, contemporary CSS and HTML methods, but the few things I still cling to, I do because I can never seem to get them to consistently work 'the proper way'. For example, the main two things I use still (when I know I shouldn't) are tables (for some formatting) and <center>. Tonight, I've been trying to replace my <center> tags with proper CSS equivelants, but it's just not working (consistantly)... which is why I keep falling back on them. I know it's because I'm doing something wrong, or misunderstanding something, but nonetheless, that's where I'm at... so, it's either do it 'right' and it doesn't work... or do it 'wrong' and at least it works (for now). So, for tonight, the thing I'm trying to figure out is how to simply center my main window/frame of the site in the browser window. My understanding, is the standard way is to use <div>, and define a style consisting of display:block, margins:auto... and I think that's it? Sometimes this works, sometimes it doesn't... and I'm really not clear on why. I'm trying to center two tables, so I have them both within a set of <div>, with the display and margin settings as I mentioned. Right now, it seems to center in some browsers, and not others. (I do have a DOCTYPE defined, BTW) So, I'm at a loss... much like I was the other times I tried (sincerely) to drop my bad habits and go full CSS. So, assuming my 'site' consists of two tables (one after the other), how would I go about centering them? What do I need to add to the method I outlined above? What could be causing it to not work? Also, is the use of <center> still compatible on all browsers/platforms, or has it been starting to get phased out? Edited June 14, 2014 by L.Adlon Link to comment Share on other sites More sharing options...
davej Posted June 14, 2014 Share Posted June 14, 2014 The two most common methods of horizontal centering are to apply margin:0 auto or to set text-align:center. I think it is also often helpful to temporarily add borders to the various blocks so that you can see them. If you have specific example code that demonstrates a centering problem -- then please post it -- don't just describe it in words. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>title</title><style>#wrap{width:300px;margin: 0 auto;text-align:center;border:1px solid #ccc;}</style></head><body><div id="wrap"><h1>Log In</h1><p>Please log in:</p><input type="text" placeholder="Username"/><br/><input type="text" placeholder="Password"/><br/><br/><input type="submit" value="Enter"/><br/><br/>Thank You!</div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted June 14, 2014 Share Posted June 14, 2014 Don't use borders, use background colour, using borders adds to width of element and wont give true representation of problem. Link to comment Share on other sites More sharing options...
L.Adlon Posted June 14, 2014 Author Share Posted June 14, 2014 Hi, guys. Yep, I had been trying to do it with the margin:0 method on a simple test page (where all there is, is a single cell table for now). Seems like Firefox doesn't center it, but IE does. I had also tried applying that sort of thing to the body tag, figuring maybe I could just get it as a global thing that way. I'll experiment some more. I must be missing something (although IE is doing it fine). Link to comment Share on other sites More sharing options...
dsonesuk Posted June 14, 2014 Share Posted June 14, 2014 margin: 0 auto; only works on block elements (which a div element is already) that are given a width, 960px or 95%, if no width is defined, then being a block element it will stretch to the width available to it within its parent container element, and margin: 0 auto will have no effect. To centre tables using div, ensure the div matches the width of tables, OR define a suitable width for div and make sure table uses 100% width to fill the div width completely, then apply margin: 0 auto; TO div. Link to comment Share on other sites More sharing options...
L.Adlon Posted June 14, 2014 Author Share Posted June 14, 2014 Ya, I'm sure it's got to be some simple thing either missing or conflicting. I'll tinker with it today and see if it's still giving me grief. Thanks. Link to comment Share on other sites More sharing options...
L.Adlon Posted June 14, 2014 Author Share Posted June 14, 2014 (edited) Damn, I'm still not getting it to work. Here's my latest test code. Now Firefox is displaying it fine, but IE is not centering it. What am I doing wrong here? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Untitled</title> <style> .center { display:block; margin:0 auto; width:960px; text-align:center; } </style> </head> <body style="margin:0; padding=0;"> <div class="center"> <table summary="" border="1" width="960"> <tr> <td align="center">CELL CONTENT</td> </tr> </table> </div> </body></html> @dsonesuk: Are you saying the width has to be 960px or 95%... or can it be any width, as long as it is defined? [Additional note: One thing it may be is that my version of IE is not up to date, since I don't use it. Could that be why?] [A little while later...] I managed to try out a newer version of IE, and it DOES center in that one. So, I guess the support for the CSS was a bit late coming. Okay, so I just want to verify with you guys... The coding I showed above is all fine, right? Edited June 14, 2014 by L.Adlon Link to comment Share on other sites More sharing options...
davej Posted June 14, 2014 Share Posted June 14, 2014 Maybe... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Untitled</title><style>body{margin:0;padding:0;}#wrap{width:960px;margin:0 auto;text-align:center;background-color:#ddd;border:1px solid #999;}table{border:1px solid #999;width:900px;margin:5px auto;}td{text-align:center;}</style></head><body><div id="wrap"> <table> <tr> <td>CELL CONTENT</td> </tr> </table></div></body></html> 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