Several methods of horizontal center of html elements

Posted by fatalcure on Sat, 02 May 2020 09:41:04 +0200

Next, I will introduce several ways to horizontally center html elements one by one

1: Text align: Center; for inline elements

2: Using margin:0 auto; to realize horizontal center display

3: Implement with table


4, Block level elements, however, are horizontally centered by converting them to inline elements


5: Both parent and child elements adopt relative positioning, the parent element left:50%; the child element left:-50%; the relative length is reduced by 50%, so that more parts can be pulled back after the right offset


6: Using css3's flexbox, display:flex;


7: Use the display:relative; of the parent element to directly use position:absolute;left:0;right:0;margin:auto to realize horizontal to center



Here are the specific codes explained:

  1. <!DOCTYPE html>  
  2. <!--  
  3. To change this license header, choose License Headers in Project Properties.  
  4. To change this template file, choose Tools | Templates  
  5. and open the template in the editor.  
  6. -->  
  7. <html>  
  8.     <head>  
  9.         <title>css Horizontal center of</title>  
  10.         <meta charset="UTF-8">  
  11.         <meta name="viewport" content="width=device-width">  
  12.         <style type="text/css">  
  13.             #page{  
  14.                 width: 100%;  
  15.                 color: white;  
  16.             }  
  17.             .he{  
  18.                 width: 100%;  
  19.                 height: 100px;  
  20.                 background: #625050;  
  21.                 text-align: center;  
  22.                 line-height: 100px;  
  23.             }  
  24.             .bo{  
  25.                 width: 100%;  
  26.                 background: #6aa087;  
  27.             }  
  28.             .fo{  
  29.                 height: 100px;  
  30.                 background: #2f5d34;  
  31.             }  
  32.             .content{  
  33.                 height: 100px;  
  34.                 border: 2px solid #fff;  
  35.             }  
  36.             .content1{  
  37.                 background: #66a05c;  
  38.                 text-align: center;  
  39.             }  
  40.             .content2{  
  41.                 background: #8a5841;  
  42.                 text-align: center;  
  43.             }  
  44.             .content2Bo{  
  45.                 height:50px;  
  46.                 width: 60%;  
  47.                 border: 2px solid red;  
  48.                 line-height: 50px;  
  49.                 margin: 0 auto;  
  50.             }  
  51.             .content3{  
  52.                 background: #2f5d34;  
  53.             }  
  54.             table{  
  55.                 margin: 0 auto;  
  56.             }  
  57.             .content4{  
  58.                 background: #8a5841;  
  59.                 text-align: center;  
  60.             }  
  61.             .contentBo4{  
  62.                 display: inline;  
  63.             }  
  64.             ul li{  
  65.                 list-style-type: none;  
  66.             }  
  67.             .content5{  
  68.                 float: left;  
  69.                 position: relative;  
  70.                 left: 50%;  
  71.             }  
  72.             .contentBo5{  
  73.                 position: relative;  
  74.                 left: -50%;  
  75.                 background: #231b40;  
  76.             }  
  77.             .content6{  
  78.                 width: 100%;  
  79.                 text-align: center;  
  80.                 background: #9ca05c;  
  81.                 display: flex;  
  82.                 align-items: center;  
  83.                 justify-content: center;  
  84.             }  
  85.             .content7{  
  86.                 position: relative;  
  87.             }  
  88.             .contentBo7{  
  89.                 position: absolute;  
  90.                 left: 0;  
  91.                 right: 0;  
  92.                 width: 80%;  
  93.                 border: 2px solid red;  
  94.                 margin: 0 auto;  
  95.                 text-align: center;  
  96.             }  
  97.         </style>  
  98.     </head>  
  99.     <body>  
  100.         <div id="page">  
  101.             <div class="he">  
  102.                 <h1>Here are a few examples of horizontal alignment of elements</h1>  
  103.             </div>  
  104.             <div class="bo">  
  105.                 <div class="content content1">  
  106.                     This is content area 1: realize the horizontal and central display of elements in the row Use text-align:center;How.  
  107.                 </div>  
  108.                 <div class="content content2">  
  109.                     <div class="content2Bo">  
  110.                         This is content area two:Red area part adopts margin:0 auto;To achieve horizontal center display, of course, to write the width of the elements.  
  111.                     </div>  
  112.                 </div>  
  113.                 <div class="content content3">  
  114.                     <table><tbody><tr><td>  
  115.                                     This is content area 3: use table realization.  
  116.                                 </td></tr></tbody></table>  
  117.                 </div>  
  118.                 <div class="content content4">  
  119.                     <ul class="contentBo4">  
  120.                         <li>This is the first line</li>  
  121.                         <li>This is the second line</li>  
  122.                         <li>This is content area four: originally contentBo4 The block level elements of the are converted to inline elements to achieve horizontal centering of the block level elements.</li>  
  123.                     </ul>  
  124.                 </div>  
  125.                 <div class="content5">  
  126.                     <div class="content contentBo5">  
  127.                         This is content area 5: the parent and child elements are relatively positioned, and the parent element left:50%;Subelements left:-50%;Reduce your length back to 50%，This enables you to pull back more parts after offsetting to the right.  
  128.                     </div>  
  129.                 </div>  
  130.                 <div class="content content6">  
  131.                     This is content area six:Use css3 Of flexbox，display:flex;  
  132.                 </div>  
  133.                 <div class="content content7">  
  134.                     <div class="contentBo7">  
  135.                         This is content area seven:With parent element display:relative;Direct adoption position:absolute;left:0;right:0;margin:auto To achieve horizontal to center.  
  136.                     </div>  
  137.                 </div>  
  138.             </div>  
  139.             <div class="fo">  
  140.                 <pre> In conclusion, there are only several ways to achieve the level of middle:  
  141.                     1: Centering for the simplest inline elements text-align:center;Just set it up.  
  142.                     2: Use absolute positioning after setting for the most common horizontal center left: 50%;After that, various methods are used to make up the level difference.  
  143.                     3: For ordinary element alignment, you can also use absolute positioning after left:0;right:0;With the width of the element, you can use margin:auto;Horizontal alignment is achieved.  
  144.                     4: use css3 Of Flexbox attribute  
  145.                     5:Nesting outside elements table Implementation, but there will be many layers of nesting   
  146.                     6: marin:0 auto;Convenient horizontal centering of known width  
  147.                 </pre>  
  148.             </div>  
  149.         </div>  
  150.     </body>  
  151. </html>  

Topics: css3 Attribute

Hot Topics

©2024 Programmer Think