Jump to content

Centering Objects?


darwen

Recommended Posts

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...