Ruud Posted April 16, 2009 Share Posted April 16, 2009 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 More sharing options...
jeffman Posted April 16, 2009 Share Posted April 16, 2009 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 More sharing options...
Steven Posted April 16, 2009 Share Posted April 16, 2009 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 More sharing options...
Ruud Posted April 16, 2009 Author Share Posted April 16, 2009 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 More sharing options...
jlhaslip Posted April 17, 2009 Share Posted April 17, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.