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

Source: Internet
Author: User

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>

 

Related Article

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.