Bagaimana untuk memusatkan elemen div secara menegak dalam semua pelayar menggunakan CSS?-html tutorial-php.cn

Bagaimana untuk memusatkan elemen div secara menegak dalam semua pelayar menggunakan CSS?

PHPz

Lepaskan： 2023-09-07 16:17:02

ke hadapan

620 orang telah melayarinya

Bagaimana untuk memusatkan elemen div secara menegak dalam semua pelayar menggunakan CSS?

Untuk memusatkan elemen div secara menegak dalam semua penyemak imbas menggunakan CSS, gunakan Flexbox. CSS3 menyediakan mod susun atur lain, Kotak Fleksibel, biasanya dikenali sebagai Flexbox. Menggunakan mod ini, anda boleh membuat reka letak dengan mudah untuk aplikasi dan halaman web yang kompleks. Tidak seperti apungan, reka letak Flexbox memberi anda kawalan sepenuhnya ke atas arah, penjajaran, susunan dan saiz kotak.

Teg ialah bekas untuk elemen dalam HTML. Kami boleh meletakkan apa-apa jenis kandungan di dalam div. Mulakan dengan menambah elemen, kemudian gayakannya menggunakan CSS. Kini kita hanya boleh memusatkan div secara menegak, tetapi boleh memusatkannya secara mendatar.

Untuk memusatkan div secara menegak, kami akan menggunakan atribut flex, atribut align-item. Nilai ditetapkan ke tengah ke tengah div. Dalam contoh di bawah, kami menetapkan salah satu div kepada penjajaran tengah menggunakan atribut align-item dengan nilai tengah -

demo2 {
   display: flex;
   align-items: center;
   height: 60%;
}

Salin selepas log masuk

Kemudian tetapkan kandungan dalam demo2 div yang sama kepada penjajaran tengah -

<div class="demo2">
   <img src="https://www.tutorialspoint.com/archery/images/archery-mini-logo.jpg" alt="Archery Tutorial">
   <p>Archery is a bow and arrow game where each player is supposed to shoot arrows from a bow and hit a fixed target.</p>
</div>

Salin selepas log masuk

Contoh

Sekarang mari lihat contoh memusatkan elemen div secara menegak menggunakan CSS untuk semua pelayar -

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center Div Elements</title>
</head>
<style>
   body,
   html {
      height: 100%;
   }
   .demo2 {
      display: flex;
      align-items: center;
      height: 60%;
   }
   .demo1,
   .demo2 {
      border: 2px solid skyblue;
      background-color: blue;
      color: white;
   }
</style>
<body>
   <h1>Archery Tutorial</h1>
   <div class="demo1">
      <img src="https://www.tutorialspoint.com/archery/images/archery-mini-logo.jpg"
      alt="Archery Tutorial">
      <p>Archery is a bow and arrow game where each player is supposed to shoot arrows from a
      bow and hit a fixed target.</p>
   </div>
   <p>Let us now center the div elements: </p>
   <div class="demo2">
      <img src="https://www.tutorialspoint.com/archery/images/archery-mini-logo.jpg"
      alt="Archery Tutorial">
      <p>Archery is a bow and arrow game where each player is supposed to shoot arrows from a
      bow and hit a fixed target.</p>
   </div>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk memusatkan elemen div secara menegak dalam semua pelayar menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!