Kaedah: 1. Gunakan gaya "text-align:center" untuk mencapai pemusatan mendatar. 2. Gunakan gaya "ketinggian garisan: ketinggian garisan;" untuk mencapai pemusatan menegak. 3. Gunakan gaya "align-item:center;justify-content:center" untuk mencapai pemusatan mendatar dan menegak.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Apakah kaedah penjajaran dalam css
1 Pemusatan mendatar bagi elemen sebaris
Jika elemen set ialah elemen sebaris seperti teks, gambar, dsb., tetapkan text-align:center dalam elemen induk untuk mencapai mendatar memusatkan elemen sebaris, dan memusatkan elemen anak secara mendatar Paparan elemen ditetapkan kepada blok sebaris, menjadikan elemen anak menjadi elemen sebaris
<div class="parent" style="background-color: gray;"> <div class="child" style="background-color: lightblue;">DEMO</div></div> <style> .parent{text-align: center;} .child{display: inline-block;} </style>
Apabila elemen set ialah elemen tahap blok lebar tetap, menggunakan penjajaran teks: tengah tidak akan berfungsi. Pemusatan boleh dicapai dengan menetapkan nilai "margin kiri dan kanan" kepada "auto".
<div class="parent" style="background-color: gray;"> <div class="child" style="background-color: lightblue;">DEMO</div> </div> <style> .child{ width: 200px; margin: 0 auto; } </style>
Dalam kerja sebenar, kita akan menghadapi keperluan Set pemusatan untuk "elemen peringkat blok dengan lebar berubah", seperti navigasi penomboran pada halaman web Oleh kerana bilangan penomboran tidak pasti, kami tidak boleh mengehadkan kefleksibelannya dengan menetapkan lebar.
Apabila lebar elemen peringkat blok lebar boleh ubah tidak menduduki satu baris, anda boleh menetapkan paparan kepada jenis sebaris atau blok sebaris (ditetapkan untuk memaparkan elemen sebaris atau elemen blok sebaris)
2. Pemusatan menegak
<div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> <style> .container{text-align:center;background: beige} .container ul{list-style:none;margin:0;padding:0;display:inline-block;} .container li{margin-right:8px;display:inline-block;} </style>
Sama seperti pemusatan mendatar, di sini kita bercakap tentang pemusatan menegak Mula-mula tetapkan dua syarat, iaitu elemen induk adalah bekas kotak dan ketinggian telah ditetapkan Kanak Elemen ialah elemen sebaris dan ketinggiannya disokong oleh kandungannya
Dalam kes ini, anda perlu menetapkan ketinggian garisan elemen induk kepada ketinggiannya untuk memusatkan elemen kanak-kanak secara menegak
3 Pemusatan mendatar dan menegak
<div class="wrap line-height"> <span class="span">111111</span></div> <style> .wrap{ width:200px ; height: 300px; line-height: 300px; border: 2px solid #ccc; } .span{ background: red; } </style>
Dalam teg css, tetapkan atribut paparan kepada flex untuk melaksanakan reka letak fleksibel. , dan kemudian tetapkan atribut align-item ke tengah (berpusat secara mendatar), Sifat justify-content ditetapkan ke tengah (berpusat secara menegak). Anda boleh menetapkannya untuk dipusatkan secara mendatar dan menegak.
Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:Video Pengaturcaraan
! !<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="mydiv"> <span>测试</span> </div> <style type="text/css"> .mydiv{ width:200px; height:100px; border:1px solid black; display:flex; align-items:center; justify-content:center; } </style> </body> </html>
Atas ialah kandungan terperinci Apakah kaedah penjajaran dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!