Apakah kaedah penjajaran dalam css-tutorial css-php.cn

Apakah kaedah penjajaran dalam css

WBOY

Lepaskan： 2021-11-18 14:30:29

asal

7767 orang telah melayarinya

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.

Apakah kaedah penjajaran dalam css

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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