Bagaimana untuk menyelaraskan bekas Flexbox ke tengah menggunakan JavaScript?

Untuk menjajarkan bekas Flexbox ke tengah menggunakan JavaScript, kita perlu memilih bekas terlebih dahulu menggunakan kaedah manipulasi DOM seperti querySelector. Seterusnya, kita perlu menetapkan sifat CSS bekas kepada "display: flex" dan "justify-content: center". Ini akan menyelaraskan bahagian tengah item dalam bekas secara mendatar.

Flexbox ialah mod susun atur dalam CSS3 yang membolehkan anda menjajarkan dan mengedarkan elemen pada halaman. Ia boleh digunakan untuk membuat bar navigasi utama atau meletakkan galeri foto, dsb. Flexbox ialah alat berkuasa yang boleh menjadikan reka letak halaman web anda lebih fleksibel dan responsif.

Kaedah

Terdapat pelbagai cara untuk memusatkan bekas Flexbox menggunakan JavaScript -

• Cara yang paling biasa ialah menetapkan sifat margin-kiri dan margin-kanan kepada "auto". Ini akan menyebabkan bekas Flexbox dipusatkan dalam elemen induknya.

• Cara lain ialah menetapkan lebar bekas Flexbox kepada "100%" dan kemudian tetapkan sifat "justify-content" kepada "center". Ini akan menyebabkan bekas Flexbox dipusatkan dalam elemen induknya.

Kod di bawah akan memusatkan bekas Flexbox menggunakan JavaScript. Bekas mesti mempunyai lebar yang ditentukan dan arah flex mesti ditetapkan kepada baris.

Pertama, kami mendapat elemen dengan ID "bekas" -

var container = document.getElementById("container");

Kemudian kami tetapkan gaya bekas.flexDirection kepada "row" -

container.style.flexDirection = "row";

Akhir sekali, kami menetapkan gaya kontena.justifyContent kepada "pusat" -

container.style.justifyContent = "center";

Contoh

   

   
      

         
I will be centered
      
      <script> 
         var container = document.getElementById(&quot;container&quot;);
         container.style.display ='flex';
         container.style.flexDirection = 'row';
         container.style.justifyContent = 'center';
      </script>
   

Atas ialah kandungan terperinci Bagaimana untuk menyelaraskan bekas Flexbox ke tengah menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!