Perbincangan mengenai pemusatan mendatar dan menegak elemen dalam HTML_HTML/Xhtml_Webpage Production

Apabila kami mereka bentuk halaman, kami selalunya perlu memusatkan DIV dan memaparkannya secara mendatar dan menegak berbanding tetingkap halaman, seperti memusatkan tetingkap log masuk.

Setakat ini, banyak kaedah telah diterokai.

HTML:

Kod XML/HTMLSalin kandungan ke papan keratan

1. <badan>
2.  <div kelas="maxbox" >
3.  <div kelas="menjajarkan kotak min -center">div>
4.  div> 
5. badan>

Perenderan (kaedah berikut mempunyai pemaparan yang sama):

Jenis pertama: kedudukan mutlak CSS

Terutamanya gunakan kedudukan mutlak, dan kemudian gunakan margin untuk melaraskan ke kedudukan tengah.

Unsur induk:

Kod CSSSalin kandungan ke papan keratan

1. .maxbox{
2. kedudukan: saudara;
3. lebar: 500px
4. tinggi: 500px
5. margin: 5px; bayang-bayang kotak:
1px
6. 1px 1px rgba (0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8); }
8. Unsur kanak-kanak:

Kod CSS

Salin kandungan ke papan keratan

.kotak min{

1. lebar
:
2. 200px tinggi
:
3. 200px bayang kotak: 1px
4. 1px 1px rgba (0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8); }

   Penjajaran tengah mendatar dan menegak:

   Kod CSSSalin kandungan ke papan keratan

   1. .align-pusat{
   2. kedudukan: mutlak;
   3. kiri: 50%;
   4. atas: 50%;  
   margin-kiri
   5. : -100px;  /*lebar/-2* /  
   margin-atas
   6. : -100px;  /*tinggi/-2* / }

   Jenis kedua: CSS kedudukan mutlak Javascript/JQuery

   Terutamanya gunakan kedudukan mutlak, dan kemudian gunakan Javascript/JQuery untuk menyesuaikan diri dengan kedudukan tengah. Berbanding dengan kaedah pertama, kaedah ini meningkatkan fleksibiliti kelas. Unsur induk:

   Kod CSS

   Salin kandungan ke papan keratan

   .maxbox{

   kedudukan
   2. : saudara; lebar
   :
   3. 500px tinggi
   :
   4. 500px margin
   :
   5. 5px; bayang kotak: 1px
   1px
   6. 1px rgba (0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8); }
   7. Unsur kanak-kanak:
   8. Kod CSS
   Salin kandungan ke papan keratan
   .kotak min{

   lebar
   1. : 200px
   2. tinggi: 200px
   3. bayang kotak: 1px 1px
   4. 1px rgba (0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8); } Penjajaran tengah mendatar dan menegak:
   Kod CSS
   5. Salin kandungan ke papan keratan
   1. .align-pusat{
   2. kedudukan: mutlak;
   3. kiri: 50%;
   4. atas: 50%; }
   JQuery:

   Kod JavaScript

   Salin kandungan ke papan keratan

   $(

   1. fungsi(){ $(
   ".align-center"
   2. ).css(                                             
    
   3. "margin-kiri"
   : ($(
   4. ".align-center").width() /-2),  "margin-top"
   : ($(
   5. ".align-center").height() /-2)                                                                 );
   6. });
   9. Jenis ketiga: anjakan kedudukan mutlak CSS3
   Menggunakan kedudukan mutlak dan perubahan CSS3: terjemah juga boleh mencapai kesan yang sama.

   Unsur induk:

   Kod CSS

   Salin kandungan ke papan keratan

   .maxbox{

   1. kedudukan:
   saudara
   2. ; lebar: 500px
   3. tinggi: 500px
   4. margin: 5px
   ;
   5. bayang kotak: 1px 1px
   1px
   6. rgba (0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8); } Unsur kanak-kanak:
   7. Kod CSS
   Salin kandungan ke papan keratan
   8. 1. .kotak min{
      2. lebar: 200px
      3. tinggi: 200px
      4. bayang kotak: 1px 1px 1px rgba (0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
      }
      Penjajaran tengah mendatar dan menegak:

   Kod CSS

   Salin kandungan ke papan keratan

   1. .align-pusat{
   2. kedudukan: mutlak;
   atas
   3. : 50%; kiri
   : 50%;
   4. -webkit-transform: terjemah(-50%, -50%); -moz-transform: terjemah(-50%, -50%);
   ubah: terjemah(-50%, -50%);
   5. /*Anjakan ke kiri dan ke atas*/
   }
   8. Jenis keempat: Flexbox: [Model kotak susun atur teleskopik]
   9. Membuat elemen mendatar dan menegak terlalu mudah dengan model Flexbox.
   Anda perlu menukar HTML di sini:

   Kod XML/HTMLSalin kandungan ke papan keratan

   <div

   kelas

   1. ="maxbox align-center" >  <div
   kelas
   2. ="kotak min" >div> div>
   3. Unsur induk:
   4. Kod CSS
   Salin kandungan ke papan keratan

   1. .maxbox{
   2. kedudukan: saudara;
   3. lebar: 500px
   4. tinggi: 500px
   5. margin: 5px; bayang kotak:
   1px
   6. 1px 1px rgba (0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8); }
   8. Unsur kanak-kanak:

   Kod C#

   Salin kandungan ke papan keratan

   .kotak min{

   1. lebar: 200px; tinggi: 200px;
   2. bayang kotak: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
   }
   4. Penjajaran tengah mendatar dan menegak:
   5. Kod CSS
   Salin kandungan ke papan keratan

   .align-pusat{

   1. paparan: flex;
   2. paparan: -webkit-flex;  
   membenarkan
   3. -kandungan: pusat; >
   4. align-item: tengah; } Perbandingan beberapa kaedah:
   5. Pelarasan margin kedudukan mutlak CSS yang pertama mempunyai keserasian yang baik tetapi tidak mempunyai fleksibiliti. Jika terdapat banyak kotak yang perlu dipusatkan secara mendatar dan menegak, .align-center yang berbeza perlu ditulis kerana lebar dan ketinggiannya yang berbeza. Yang kedua menggunakan bahasa skrip, yang mempunyai keserasian yang baik dan menebus kekurangan yang pertama. Kesan pemusatan mendatar dan menegak tidak akan terjejas oleh perubahan dalam lebar dan ketinggian. Yang ketiga menggunakan beberapa sifat baharu CSS3 dan serasi dengan IE10, Chrome, Firefox dan Opera. Keserasian tidak begitu baik, dan kesan pemusatan mendatar dan menegak tidak akan terjejas oleh perubahan dalam lebar dan ketinggian. Menggunakan model Flexbox, serasi dengan Firefox, Opera dan Chrome, IE dipadamkan sepenuhnya. Ia juga tidak menjejaskan kesan pemusatan mendatar dan menegak kerana perubahan dalam lebar dan ketinggian. Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.