HTML learning notes-various center alignment

0. Basic Method of forward horizontal center-specify the block width and set the block's left and right margins to auto. The top and right margins can be 0, so that the block can be horizontally centered in the parent element. The style is as follows: 1: margin: 0px auto2: margin-left: auto; margin-right: auto; basic method of vertical center -- set equal upper and lower margins of blocks. The style is as follows: padding-top: 20px; padding-bottom: 20px;
1. Align div in Center [HTML]

[Effect] [1] There is a block with an ID of all in the body. The block width is 500px and the height is 200px. The block is horizontally centered in the body using margin: 0px auto.
Figure 1 div Center
2. Text center in div [HTML]

Center

[Effect] [1] There is a block with the ID of all in the body. The block width is 500px, the height is 200px, and the block is horizontally centered in the body. [2] A block with the ID of string exists in the block named all. The block is horizontally centered in the parent element through margin: 0px auto. Text-align: center makes
Figure 2 horizontal center of div text
3 div image Center [HTML]

Center

[Effect] [1] The method and text of the image in the div are the same. set text-align: center in the parent div. [2] If You Need To vertically center the image, you can set the upper and lower margins of the parent div, for example, padding-top: 20px; padding-bottom: 20px;
Figure 3 horizontal center of images in div
4. center table content [HTML] -- HTML writing

 
 
 

  
  
  
   
 
    
Text Center
 
   
 
   
 
    
 
   
 
  
 
 

[Effect] [1] The table is horizontally centered in the parent div. [2]

The content in the cell is horizontally centered. Note that the content in the cell is vertically centered by default. Figure 4 center table content-HTML writing [HTML] CSS writing Text Center [Effect] [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 horizontally centered. Note that td {text-align: center;} and

Has the same effect. [3] results and 4 are shown. Reference [1] to summarize the conventional-CSS Center [2] implement vertical text center in the DIV Layer