darwen Posted March 22, 2007 Share Posted March 22, 2007 Im sorry, I am definatly new to CSS. I am trying to convert my table pages to CSS and I need help with the whole center comand. I have a page with no margins and I need it to be at the top of the page and in the center. I am using the DIV comand and I cant seem to figure out what centers it. Please help. What am I missing here? Link to comment Share on other sites More sharing options...
Anders Moen Posted March 22, 2007 Share Posted March 22, 2007 #div_name {width: 600px;margin: 0 auto;} ? Link to comment Share on other sites More sharing options...
darwen Posted March 22, 2007 Author Share Posted March 22, 2007 #div_name {width: 600px;margin: 0 auto;} ? Is it really as simple as adding the 'auto'? I have the zero margins, I need the center code. Link to comment Share on other sites More sharing options...
jlhaslip Posted March 23, 2007 Share Posted March 23, 2007 Depending on the Browser, you might need to add "text-align:center;" below the "margin: 0 auto;". Some older Browsers don't recognize the margin command by itself. Link to comment Share on other sites More sharing options...
iyeru42 Posted March 23, 2007 Share Posted March 23, 2007 Man, sometimes people don't do this correctly. text-align attribute won't work for anything other than text content (usually) when inside a DIV of some sort (Sometimes, putting DIVs into the text-centered DIV won't center the DIV.)However, getting past that with tables is relatively easy. TABLE, TR { text-align:center;}TD { text-align:left;} Will cause TDs to be centered, but not the text within.100th, post Link to comment Share on other sites More sharing options...
jesh Posted March 23, 2007 Share Posted March 23, 2007 I've seen a number of people mention this time and time again:To center a block level element on the page you use margins on that element: margin: 0px auto; To center inline content (whether that be text or spans or divs styled with display="inline", etc.) you use text-align on the containing element: text-align: center; If you have a DIV that you want centered in the body and you want the text (or other inline content: like an image) inside that DIV to be centered, you'd do it like this: <style type="text/css">div.centered{ margin: 0px auto; text-align: center;}</style><div class="centered" style="width: 75%; border: 1px solid green;"> The width of block-level elements default to 100% of the containing element's width so if you want to center this div inside the body, you have to specify the width as something other than 75%. The border is there so you can see the div.</div><div class="centered" style="width: 50%; border: 1px solid red;"> <img src="http://w3schools.invisionzone.com/style_images/w3sbanner.gif" /></div> EDIT: of course, this code only works in compliant browsers (i.e. not IE6). Man, I hate IE. Link to comment Share on other sites More sharing options...
aalbetski Posted March 23, 2007 Share Posted March 23, 2007 if you add this doctype to your page, it will render just fine in IE6<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 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