Align webpages with each other using CSS
How to center a div
The main style definition is as follows:
Body {text-align: center ;}
# Center {margin-Right: auto; margin-left: auto ;}
Note:
First, define text-align: center in the parent element. This means that the content in the parent element is centered. for IE, this setting is enough. However, it cannot be centered in Mozilla. The solution is to add "margin-Right: auto; margin-left: auto;" when the sub-element is defined ;"
It should be noted that, if you want to use this method to center the entire page, it is recommended that you do not set it in one Div. You can split multiple divs in sequence, you only need to define margin-Right: auto; margin-left: auto; in each split Div.
How to vertically center an image in a div
Use the background method. Example:
Body {Background: URL (http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) # fff no-repeat center ;}
The key is the final center. This parameter defines the image position. It can also be written as "top left" (upper left corner) or "bottom right", or "50 30"
The effect is as follows:
How to vertically center text in a div
If it is text, you cannot use the background method, you can use the method of increasing the line spacing to work around vertical center, completeCodeAs follows:
<HTML>
<Head>
<Style>
Body {text-align: center ;}
# Center {margin-Right: auto;
Margin-left: auto;
Height: 200px;
Background: # f00;
Width: 400px;
Vertical-align: middle;
Line-Height: 200px;
}
</Style>
</Head>
<Body>
<Div id = "center"> <p> test content </P> </div>
</Body>
</Html>
Note:
Vertical-align: middle; indicates vertical center in the row. We will increase the line spacing to the same height as the entire Div line-Height: 200px; then insert the text to the vertical center.
------------------------------------------------------------------
Traditional approach: center layout
First, for comparison, let's look at an example. It is a page design based on a center table. An example is shown in Figure A. the encoding of this example is as follows:
<Body>
<P> & nbsp; </P>
<Table width = "80%" border = "0" align = "center" cellpadding = "0"
Cellspacing = "10" bgcolor = "# ffffff">
<Tr>
<TD colspan = "2"> <H2 align = "center"> header </H2> </TD>
</Tr>
<Tr>
<TD width = "150px" valign = "TOP"> <H4> navigation </H4>
<Ul>
<Li> Let me not to the marriage of true minds </LI>
<Li> admit impediments; love is not 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"> <HR/>
<P> footer text -- admit impediments... </P>
</TD>
</Tr>
</Table>
<P> & nbsp; </P>
</Body>
<Table> this label includes the following attributes, defines its width as 80% of the page width, and places the table in the middle of the page. There is a blank section in front of the table, which makes some vertical space between the top of the page and the top of the table. There is also a blank section behind the table, which makes there space between the bottom of the page and the bottom of the table. This table contains two columns and three rows. The top unit is merged to place the header, and the bottom row is also merged to place the footer. The middle unit is divided into two columns, one for storing the main content, the other is the navigation toolbar.
This is a simple example of a technology that has been widely used for many years. In today's applications, the main representative types include nested tables to create a much more complex layout design. However, although its complexity is artificially increased, the basic technology it uses has not changed.
Convert the center design into CSS
To convert a traditional table-based layout into CSS, you only need to replace those tables and table units with Divs. One Div replaces the table itself, and the other replaces individual table units, which define the main layout elements, such as the title, footer, navigation bar, and main content. Each Div has an ID and their IDs are unique. You can use a CSS selector to create different styles, each style corresponds to one of the DIV, which is created based on the ID. The DIV that replaces the table is labeled with ID = external, and the other divs are identified by their respective functions.
This is the revised XHTML code used to replace the table with Div:
<Body>
<Div id = "outer">
<Div id = "Header">
<H2> header </H2>
</Div>
<Div id = "nav">
<H4> navigation </H4>
<Ul>
<Li> Let me not to the marriage of true minds </LI>
<Li> admit impediments; love is 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>
Note that the formats of all statements are included in the <Table> and <TD> labels and are now removed. And those blank paragraphs located before and after the table are gone. CSS format handles all formatting and space issues.
The following are the codes of CSS. These codes are used to design pages into a center style. This design is similar to the table-based design mentioned 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;
}
Parse CSS Encoding
Compared with table-based layout design, its subject style does not change much. It only sets the background color, default text font and size.
Div # outer is a style, which is the key to this technology. This is the previously mentioned style that replaces the table with a div. It creates a center box, which is a container containing all the content on the page. The rule that sets the width to 80% sets the width of the DIV, which is the same as the corresponding attribute of the table label specifying the width of the table. Similarly, background-color: # ffffff creates a white background for the DIV, just as the bgcolor = "# ffffff" attribute in the table sets a white background for the table. Margin-top: 50px and margin-bottom: 50px Replace the blank sections in the table with spaces at the top and bottom to create vertical spaces.
The key to this technology is that the external Div center should be properly arranged. There is a problem here. It can be said that we are facing a challenge, that is, div does not have an attribute like align = "center", which is different from the table, which has such an attribute. You can use text-align: center in the parent element of the div (in this case, the <body> tag) to place the external DIV in the center. Although in addition to the body, most browsers also use this queue for some block elements such as Div, we have evidence that it is misuse of the attribute of arranging the body, in addition, it will complicate the problem, just as you create some extra styles to re-return the text that has been aligned as normal to the left.
The correct way to place block elements in the center is to set: margin-left: auto, margin-Right: auto. This indicates that the browser automatically calculates the right white space width on both sides of the page and places the DIV in the center. Border: Thin Solid #000000 this rule adds a boundary around the external Div, because it is easy to add with CSS, and it is difficult to use tables. The rest of CSS encoding specifies the DIV's header, footer, NAV, and main content.
Div # header and Div # footer set the page blank and padding of those Divs. In addition, the DIV # header contains the text-align: center rule, which can place the header text in the center, and the DIV # footer contains the border-top: thin Solid #000000, which creates a boundary around the top edge of the Div. In table-based layout design, it corresponds to some horizontal lines located above the footer.
In the center of the box, div # nav and Div # Main create two columns. In the DIV # nav style, the float: Left rule pushes the DIV to the left of its parent element (external Div), while width: 25% this rule sets the DIV width to 25% of its parent element. Since the nav div is moved to the left side and its width is limited, this leaves an active space for the main Div so that it can be moved to the right side of the nav Div, in this way, two columns are achieved. The DIV # main style contains a blank 30% rule on the Left page, so that the main text is arranged in a neat vertical bar, instead of being dispersed, or even dispersed out of the nav vertical bar. The left blank page of the main div is slightly larger than the left blank page of the nav Div.
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
