Jump to content

Css Container.


Ruud
 Share

Recommended Posts

I got the following CSS for a container. How would I center this container on the page in a good way?

.twoColLiqRtHdr #container #header h5 {	text-align: right;}.twoColLiqRtHdr #container #mainContent h1 {	text-align: center;}.twoColLiqRtHdr #container #mainContent h1 {	text-align: left;}.curlycontainer{border: 1px solid #b8b8b8;margin-bottom: 1em;width: 100%;}.curlycontainer .innerdiv{background: transparent url(images/brcorner.gif) bottom right no-repeat;position: relative;left: 2px;top: 2px;padding: 1px 4px 15px 5px;}

Link to comment
Share on other sites

The normal way to center a block-level item is like this:margin-left: auto;margin-right: auto;You'll often see that shortened to this:margin: 0 auto;but you must use that only if you want the top and bottom margins to be 0.Note that this will only work if the block-level item has a defined width. Block level-items (like <p> and <div>) default to the width of the window, so centering them makes no sense unless you define the width to be something smaller than the window's width.On some older browsers, this technique does not work. If that is the case, then the element that contains the centered item (often your <body> or <html> element) will need this also:text-align: center;

Link to comment
Share on other sites

What Chtulhu said.Try your hardest to avoid <center> tags. Also, be certain that your centering and containing divs' width is an even number. It's easier to correctly center a 800px div cross-browser than a 799px one.

Link to comment
Share on other sites

The normal way to center a block-level item is like this:margin-left: auto;margin-right: auto;You'll often see that shortened to this:margin: 0 auto;but you must use that only if you want the top and bottom margins to be 0.Note that this will only work if the block-level item has a defined width. Block level-items (like <p> and <div>) default to the width of the window, so centering them makes no sense unless you define the width to be something smaller than the window's width.On some older browsers, this technique does not work. If that is the case, then the element that contains the centered item (often your <body> or <html> element) will need this also:text-align: center;
I tried both methods but it seems it centers the text into the middle of the container instead of centering the container in the space that it has.
Link to comment
Share on other sites

We may need to see the code for the entire page to assist further. What width restrictions are on the 'container'?Can you post a link to the page, please, and tell us which block you need centered?

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
 Share

×
×
  • Create New...