A recent reader asked how to create a centered page layout with CSS. What the reader pursues is to achieve such an effect as to design a 800-pixel-wide table on a 1024-pixel page. This is a very extensive page design method, traditionally, it relies on nested tables to achieve this effect, so the reader's pursuit of a way to use CSS to achieve this effect is not surprising.
The basic technique of creating a centered page design with CSS is relatively simple, but not much simpler than the same kind. Let's take a look at how to translate this age-old form-based design into CSS.
Traditional approach: Centered layout
First, because it's a comparison, let's look at an example of a page design based on a centered table. An example is shown in chart A, and the following is the code for this example:
<body>
<p> </p>
<table width= "80%" border= "0" align= "center" cellpadding= "0" cellspacing= "bgcolor=" "#FFFFFF"
<tr>
<td colspan= "2" >
</tr>
<tr>
<td width= "150px" valign= "Top" > <ul>
<li>let me not to the marriage of true minds</li>
<li>admit imped iments; Love isn't Love</li>
<li>which alters when it alteration finds</li>
</ul>
</ Td>
<td valign= "Top" ><p>main Content--Love's not
time ' s fool...</p></td>
</tr>
<tr>
<td colspan= "2" > <p>footer text-admit impediments ... . </p>
</td>
</tr>
</table>
<p> </p>
</body>
< table > This tab includes the following properties, defining its width as 80% of the page width and placing the table in the middle of the page. There is a blank paragraph in front of the table, which gives you some vertical space between the top of the page and the top of the table. There is also a blank paragraph at the back of the table, which gives you some space between the bottom of the page and the bottom of the table. This table includes two columns and three rows. The top unit is merged to place the header and the bottom row is merged to place the footer, while the middle units are divided into two columns, one for the main content and the other for the navigation toolbar.
This is a simple example of a technology that has been widely used by people for many years. In today's applications, the representative main species includes nested tables to create a much more complex layout, although its complexity is artificially increased, and the basic technology it uses has not changed.
Convert the centered design to use CSS
To convert this traditional table-based layout into CSS, you just use divs instead of tables and table cells. One div replaces the table itself, and the other replaces the individual table cells, which define the main layout elements, such as headings, footers, navigation bars, and main content. Each div has an ID, and their IDs are unique, and you can use a CSS selector to create their own different styles, each of which corresponds to one of the Div, which is based on the ID. The DIV, which replaces the table, is marked outside the id=, and the other div is identified by their respective functions.
This is the edited XHTML code that replaces the table with Div:
<body>
<div id= "outer" >
<div id= "Header" >
</div>
<div id= "NAV" >
<ul>
<li>let me not to the marriage of true minds</li>
<li>admit impediments; Love are not love</li>
<li>which alters when it alteration finds</li>
</ul>
</div>
<div id= "Main" >
<p>main Content--Love's not time ' s fool...</p>
</div>
<div id= "Footer" >
<p>footer text--Admit impediments...</p>
</div>
</div>
</body>
Take note of all the statements that have been included in the <table> and <td> tags and are now removed. The blank passages in front and back of the table are also missing. The CSS format handles all the formatting and space issues.
Here's the code for CSS, which is the code that designs the page into a centered style, similar to the table-based design described above:
Body {
Background-color: #999999;
font-size:12px;
Font-family:verdana, Arial, Helvetica, Sans-serif;
}
Div#outer {
width:80%;
Background-color: #FFFFFF;
margin-top:50px;
margin-bottom:50px;
Margin-left:auto;
Margin-right:auto;
padding:0px;
Border:thin solid #000000;
}
Div#header {
padding:15px;
margin:0px;
Text-align:center;
}
Div#nav {
width:25%;
padding:10px;
margin-top:1px;
Float:left;
}
Div#main {
margin-left:30%;
margin-top:1px;
padding:10px;
}
Div#footer {
padding:15px;
margin:0px;
Border-top:thin solid #000000;
}
Chart B shows the result, which is the layout of a centered page that is executed with CSS.
Parsing CSS Encoding
Compared with the table based layout, it has no change in the body style. It just sets the background color, the default body font, and the size.
Div#outer is one of the styles, and it is the key to this technology. This is the previously mentioned style of using div instead of a table, which creates a centered box that is the container that contains all the content of the page. The rule with the width set to 80% sets the width of the div so that the table's width is the same as the corresponding property of the table label. Similarly, Background-color: #FFFFFF为div建立了一个白色的背景, just as the bgcolor= "#FFFFFF" property in a table sets a white background for the table. margin-top:50px and margin-bottom:50px replaces the blank paragraphs in the table that create vertical space with the top and bottom blanks.
The key to this technique is that the center of the outer div is arranged appropriately. One of the challenges that we face here is that the div doesn't have a property like align= "center", which is different from the table, and there is a property in the table. You can use Text-align:center in the div's parent element (in this case, the < BODY > tag) to place the external div in the center. Although most browsers use the queue for some block elements, such as Div, in addition to the body text, but we have proof that it is misused for the attribute of arranging the text, and it complicates the problem, as you create some extra styles to get the text that has been aligned to the normal standard back to the left.
The correct way to put a block element in a central position with CSS is to set it up: Margin-left:auto,margin-right:auto. This instructs the browser to automatically calculate the appropriate blank width on both sides of the page, thereby placing the div in the center. Border:thin solid #000000这一规则在外部div的周围添加了一个边界, because it's easy to add CSS, and it's hard to use a table. Other parts of the CSS code specify the div's header, footer, nav, and main content.
Div#header and Div#footer set the div's margins and padding. In addition, Div#header contains the Text-align:center rule, which places the header text in a central position, and Div#footer contains the Border-top:thin solid #000000这一规则, It can create a boundary around the top edge of the div, whereas in a tabular layout, it corresponds to some horizontal lines above the footer.
In the middle of the center of the box, Div#nav and Div#main set up two vertical columns. In the Div#nav style, float:left this rule pushes the div to the left of its parent element (outer div), which width:25% the rule to set the div's width to 25% of its parent element. As the Nav div is moved to the left and its width is limited, this leaves the active space for the main Div, allowing it to move to the right side of the Nav Div, which results in two vertical columns. The Div#main style contains the rules for the left page blank 30% so that the main text is arranged in a neat column instead of being dispersed or even outside the nav column. The main div's left blank page is slightly larger than the width of the left blank page in the nav div. In my article " using CSS to create a three-column page layout ", I introduced a technique that floats with CSS to create multiple columns in a page design.
The author: Michael Meadhra, who has been involved in the IT industry since the advent of the Web, has published more than 30 books, including the I-Everything with Dreamweaver MX (Osborne/mcgraw-hill Publishing).
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
