{"id":1091,"date":"2011-07-22T10:10:01","date_gmt":"2011-07-22T14:10:01","guid":{"rendered":"http:\/\/www.iowawebnet.com\/ein\/?p=1091"},"modified":"2011-07-22T10:10:31","modified_gmt":"2011-07-22T14:10:31","slug":"1091","status":"publish","type":"post","link":"https:\/\/www.iowawebnet.com\/ein\/2011\/07\/1091\/","title":{"rendered":"CSS Centering"},"content":{"rendered":"

Author: Russ Weakley<\/a><\/p>\n

How do you center a containing block on a page using CSS? There are two main methods and the choice should be made based on whether your page layout is liquid (will move in and out depending on the size of the browser window) or fixed width.<\/p>\n

Centering liquid layouts<\/h3>\n

Liquid layouts are easy to center using margins on each side of the containing box. The margins can be set with em, pixel or percentage units.<\/p>\n

div#container\r\n{\r\n\tmargin-left: 10%;\r\n\tmargin-right: 10%;\r\n}<\/code><\/pre>\n
Centering fixed-width layouts<\/h3>\n
Theoretically, you should be able to apply auto margins to the left and  right of the containing block and it should center on the page.<\/p>\n
The W3C Visual formatting model<\/a> states: \u201cIf both \u2018margin-left\u2019 and \u2018margin-right\u2019 are \u2018auto\u2019, their  used values are equal. This horizontally centers the element with  respect to the edges of the containing block.\u201d<\/p>\n
So, a containing block should be able to be centered using the following rules:<\/p>\n
div#container\r\n{\r\n\tmargin-left: auto;\r\n\tmargin-right: auto;\r\n\twidth: 50em;\r\n}<\/code><\/pre>\n
However, some browsers do not center the containing blocks using this  method as they ignore the auto margins. These browsers include:<\/p>\n
    \n
  • NN4 (Mac and Win)<\/li>\n
  • Win\/IE4<\/li>\n
  • Win\/IE5<\/li>\n
  • Win\/IE5.5<\/li>\n
  • Win\/IE6 (when in quirks-mode)<\/li>\n<\/ul>\n
    By adding two simple rules, this problem can be overcome in all of the browsers mentioned above, excluding NN4.<\/p>\n
    1. Center the body<\/h4>\n
    While these browsers ignore auto margins, they will follow \u201ctext-align:  center\u201d. If this is applied to the body, the containing block will  center correctly. So, a new rule is added:<\/p>\n
    body\r\n{\r\n\ttext-align: center;\r\n}\r\n\r\ndiv#container\r\n{\r\n\tmargin-left: auto;\r\n\tmargin-right: auto;\r\n\twidth: 50em;\r\n}<\/code><\/pre>\n
    2. Resetting text-align<\/h4>\n
    The only problem with this new rule is that all content on the page is  now center-aligned. To overcome the center alignment problem, a new  declaration is added within the containing block rule set \u2013 \u201ctext-align:  left\u201d. The final CSS code is:<\/p>\n
    body\r\n{\r\n\ttext-align: center;\r\n}\r\n\r\ndiv#container\r\n{\r\n\tmargin-left: auto;\r\n\tmargin-right: auto;\r\n\twidth: 50em;\r\n\ttext-align: left;\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    Author: Russ Weakley How do you center a containing block on a page using CSS? There are two main methods and the choice should be made based on whether your page layout is liquid (will move in and out depending on the size of the browser window) or fixed width. Centering liquid layouts Liquid layouts […]<\/p>\n","protected":false},"author":35,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,53],"tags":[54,55],"class_list":["post-1091","post","type-post","status-publish","format-standard","hentry","category-applications","category-css","tag-css-2","tag-web-design"],"_links":{"self":[{"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/posts\/1091"}],"collection":[{"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/comments?post=1091"}],"version-history":[{"count":3,"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/posts\/1091\/revisions"}],"predecessor-version":[{"id":1094,"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/posts\/1091\/revisions\/1094"}],"wp:attachment":[{"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/media?parent=1091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/categories?post=1091"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/tags?post=1091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}