The elements in the CSS row and block-level elements are centered.

The elements in the CSS row and block-level elements are centered.

I. horizontal center

The element in the row is different from the block-level element. For the element in the row, you only need to set text-align = center in the parent element;

Block-level elements are centered in the following ways:

1. place the elements in the table, set the margin-left and margin-right of the table to auto, and center the table so that the block-level element leaves in the table are centered, however, this method does not conform to the semantic tag specification;

2. Convert block-level elements into intra-row elements (by setting display: inline) and then center them. In this way, the center element is converted into intra-row elements, and thus the width and height cannot be set;

3. set the parent element float: left, position: relative, left: 50%; child element float: left, position: relative, left:-50%, center by means of relative layout. the preceding three methods have their own advantages and disadvantages and are selected based on the actual scenario.

2. Vertical center

1. You can set the upper and lower padding to be equal for elements that know the height;

2. Set line-height to be equal to height

3. vertical-align is used, but this attribute is only applicable in tr and td. Therefore, you can place the elements in the table to center.

 

 

Source code

1 1 <! -- Horizontal center --> 2 2 <! -- To center an element in a row, you only need to set text-align to the parent element. --> 3 3 <div class = "father"> 4 4 <p class = "blockCenter"> 5 hehe </p> 6 6 </div> 7 7 <! -- Center table --> 8 8 <table class = "tableclass"> 9 9 <tr> 10 10 <td> 11 11 <ul class = "ulclass"> 12 12 <li> <a href = "#"> Ah </a> </li> 13 13 </ul> 14 14 </td> 15 15 </tr> 16 16 </table> 17 17 <table class = "tableclass"> 18 18 <tr> 19 19 <td> 20 <ul class = "ulclass"> 21 21 <li> <a href = "#"> Ah </a> </li> 22 <li> <a href = "#"> Ah </a> </li> 23 <li> <a href = "#"> Ah </a> </li> 24 </ul> 25 </td> 26 26 </tr> 27 </table> 28 28 <tabl E class = "tableclass"> 29 29 <tr> 30 30 <td> 31 31 <ul class = "ulclass"> 32 32 <li> <a href = "#"> </a> </li> 33 <li> <a href = "#"> </a> </li> 34 <li> <a href = "#"> Ah </a> </li> 35 <li> <a href = "#"> Ah </a> </li> 36 <li> <a href = "#"> oh </a> </li> 37 37 </ul> 38 38 </td> 39 39 </tr> 40 40 </table> 41 41 <! -- Change the inline style element to the center of the line element --> 42 42 <ul style = "{text-align: center}"> 43 43 <li style = "{display: inline} "> nihao </li> 44 44 </ul> 45 45 <! -- Use relative authority --> 46 46 <ul class = "relativeCenterFather"> 47 47 <li class = "relativeCenterChild"> Hello </li> 48 48 </ul> 49 49 50 50 <! -- Align directly to center --> 51 51 <! -- 1. Set the same Upper and Lower padding --> 52 52 <! -- 2. the parent element height and line-height are the same --> 53 53  

Css style

 

1 <style type = "text/css"> 2. father 3 {4 width: 500px; 5} 6. inlineCenter 7 {8 text-align: center; 9 float: left; 10} 11. blockCenter12 {13 width: 100px; 14 margin-left: auto; 15 margin-right: auto; 16 text-align: "center" 17} 18. tableclass19 {20 margin-left: auto; 21 margin-right: auto; 22} 23. ulclass24 {25 list-style: none; 26 margin: 0; 27 padding: 0; 28} 29. ulclass li30 {31 float: left; 32 display: inline; 33 text-align: center; 34} 35. ulclass li a36 {37 text-align: center; 38 float: left; 39 background: # abstrac5; 40 color: # fff; 41} 42. ulclass li a: hover43 {44 background: # fff; 45 color: # abstrac5; 46} 47 48 49. relativeCenterFather50 {51 float: left; 52 position: relative; 53 left: 50% 54} 55. relativeCenterChild56 {57 float: left; 58 position: relative; 59 left:-50%; 60} 61 62 63/* centered directly */64. wrap65 {66 background: #000; 67 width: 500px; 68 color: # fff; 69 height: 100px; 70 line-height: 100px; 71} 72 </style>