Apakah kaedah penjajaran dalam css

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

Pemusatan mendatar (. lebar tetap) elemen blok

<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".

Pemusatan mendatar bagi elemen blok (lebar tidak tentu)

<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.

Anda boleh tetapkan terus text-align:center kepada elemen peringkat blok dengan lebar berubah-ubah untuk mencapai ini, atau anda boleh menambah text-align:center pada elemen induk untuk mencapai kesan pemusatan.

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

! !

76c82f278ac045591c9159d381de2c57
9fd01892b579bba0c343404bcccd70fb
93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    8f6d5a544bbc0d98e0f297ef053f784d
    ef0e6bda9678de73355aeb4407692a87
    b2386ffb911b14667cb8f0f91ea547a7Document6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    f0873f1cb3abec04fcd24e69fa165f9c
        45a2772a6b6107b401db3c9b82c049c2测试54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
46d5fe1c7617e3914f214aaf043f4ccf
.mydiv{
    width:200px;
    height:100px;
    border:1px solid black;
    display:flex;
    align-items:center;
    justify-content:center;
}
531ac245ce3e4fe3d50054a55f265927
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Atas ialah kandungan terperinci Apakah kaedah penjajaran dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!