HTML Learning notes-all sorts of center-aligned

Source: Internet
Author: User
Tags sorts

0. Prefacebasic method of horizontal centering--Specify the width of the block and set the left and right margin of the block to auto, the upper and lower margin is 0, then the block can be horizontally centered in the parent element. The styles are for example the following: 1:margin:0px Auto2:Margin-left:auto; margin-right:auto;Vertical Centering Basic method--the upper and lower margins of the set block are equal. The styles are as follows:padding-top:20px; padding-bottom:20px;
1.div Center Alignment"HTML"
<! DOCTYPE html>
"Effects"The "1" body has a block with an ID of all, the width of the block is 500px and the height is 200px. Center horizontally in the body by margin:0px Auto.
Figure 1 Div Center
Center text in 2.div"HTML"
<! DOCTYPE html>
"Effects"The "1" body has a block with an ID of all, the width of the block is 500px and the height is 200px. Center horizontally in the body. "2" has a block with an ID of string in the block named All. margin:0px Auto causes the block to be centered horizontally in the parent element.

Text-align:center makes
Figure 2 Div text is centered horizontally
3 Div Image Center "HTML"

<! DOCTYPE html>
"Effects""1" picture in the div centered method and text Similarly, the parent div set Text-align:center can be. The "2" assumes that the image is centered vertically, so you can set the top and bottom padding of the parent Div. such as padding-top:20px;padding-bottom:20px;
Figure 3 Horizontal center of image in Div
4. Center the contents of the table"HTML"--html notation
<! DOCTYPE html>
"Effects""1" <table align= "Center" > causes the table to be centered horizontally in the parent div. "2" <td align= "center" > The content in the cell is centered horizontally, notice that the contents of the cell are centered vertically by default.
Figure 4 Table content centered--html notation
"HTML" CSS notation
<! DOCTYPE html>
"Effects""1" table{margin:0px auto;}, so that the table is horizontally centered in the parent div "2" td{text-align:center;}, the cell content is centered horizontally, notice td{text-align:center;} and &LT;TD align= "center" > have the same effect. "3" effect and 4 see.
References"1" For you to summarize the cliché of the---CSS Center "2" to achieve the vertical center of the text within the DIV layer

HTML Learning notes-all sorts of center-aligned

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.