Bagaimana untuk menjajarkan elemen secara menegak dalam div?-html tutorial-php.cn

Bagaimana untuk menjajarkan elemen secara menegak dalam div?

WBOY

Lepaskan： 2023-08-20 17:37:19

ke hadapan

1182 orang telah melayarinya

Bagaimana untuk menjajarkan elemen secara menegak dalam div?

Kita boleh menjajarkan elemen secara menegak dengan mudah dalam div menggunakan mana-mana cara berikut −

sifat kedudukan
Atribut ketinggian baris
Isi atribut

Mari kita lihat contoh satu persatu -

Gunakan atribut kedudukan untuk menjajarkan elemen secara menegak dalam div

Sifat kedudukan digunakan dalam meletakkan elemen Ia boleh digunakan bersama-sama dengan sifat atas, kanan, bawah dan kiri untuk meletakkan elemen di tempat yang anda inginkan

statik − Kotak elemen dibentangkan sebagai sebahagian daripada aliran dokumen biasa, mengikut elemen sebelumnya dan elemen berikut.
relatif − Kotak elemen dibentangkan sebagai sebahagian daripada aliran biasa, dan kemudian diimbangi dengan beberapa jarak.
mutlak − Kotak elemen dibentangkan berbanding dengan blok yang mengandunginya dan dikeluarkan sepenuhnya daripada aliran biasa dokumen.
tetap − Kotak elemen diposisikan secara mutlak dan mempunyai perihalan tingkah laku kedudukan: mutlak. Perbezaan utama ialah blok yang mengandungi unsur-unsur kedudukan tetap adalah sentiasa viewport.

Sekarang mari kita lihat contoh elemen penjajaran menegak dalam div menggunakan atribut kedudukan −

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Align Elements</title>
   <style>
      #demo1 {
         position: relative;
      }
      #demo2 {
         position: absolute;
         top: 50%;
         height: 100px;
         margin-top: -50px;
      }
      #demo1 {
         background-color: yellow;
         border: 2px solid gray;
         height: 15em;
      }
      #demo2 {
         background-color: skyblue;
         border: 1px solid orange;
         width: 100%;
      }
   </style>
</head>
<body>
   <h1>Vertically Align Elements</h1>
   <p>Use the position property:</p>
   <div id="demo1">
      <div id="demo2">
         <p>This is a demo text</p>
         <p>This is another demo text</p>
      </div>
   </div>
</body>
</html>

Salin selepas log masuk

Gunakan sifat ketinggian garis untuk menjajarkan elemen secara menegak dalam div

Atribut line-height mengubah suai ketinggian kotak sebaris yang membentuk baris teks. Berikut ialah nilai yang mungkin untuk ketinggian garis -

normal − mengarahkan penyemak imbas untuk menetapkan ketinggian garisan dalam elemen kepada jarak yang "munasabah".
nombor − Ketinggian sebenar garisan dalam elemen ialah nilai ini didarab dengan saiz fon elemen.
panjang − Ketinggian baris dalam elemen ialah nilai yang diberikan.
Peratusan − Ketinggian baris dalam elemen dikira sebagai peratusan saiz fon elemen.

Mari kita lihat contoh elemen penjajaran menegak dalam div menggunakan sifat ketinggian garis -

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Align Elements</title>
   <style>
      p {
         margin: 0;
      }
      #demo {
         border: 3px solid yellow;
         background-color: orange;
         height: 100px;
         line-height: 100px;
      }
   </style>
</head>
<body>
   <h1>Vertically Aligned Element</h1>
   <p>Use the line-height property:</p>
   <div id="demo">
      <p>This is demo text</p>
   </div>
</body>
</html>

Salin selepas log masuk

Gunakan atribut padding untuk menjajarkan elemen secara menegak dalam div

Sifat

padding membolehkan anda menentukan jumlah ruang yang sepatutnya muncul antara kandungan elemen dan jidarnya. Nilai atribut ini hendaklah panjang, peratusan atau perkataan warisan. Jika nilai diwarisi, pelapiknya akan sama dengan elemen induknya. Jika menggunakan peratusan, peratusan adalah relatif kepada kotak yang mengandungi.

Sifat CSS berikut boleh digunakan untuk mengawal senarai. Anda juga boleh menetapkan nilai padding yang berbeza untuk setiap sisi kotak menggunakan sifat berikut -

menentukan pelapik bawah elemen.
menentukan pelapik atas elemen. Lapik
menentukan pelapik kiri sesuatu elemen. Lapik
menentukan pelapik yang betul bagi sesuatu elemen.
berfungsi sebagai singkatan untuk sifat-sifat sebelumnya.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Align Element</title>
   <style>
      .demo {
         padding: 60px 0;
         border: 2px solid #5c34eb;
         background-color: orange;
      }
   </style>
</head>
<body>
   <h1>Vertically Align Element</h1>
   <p>Use the padding property:</p>
   <div class="demo">
      <p>This is demo text.</p>
      <p>This is another text.</p>
   </div>
</body>
</html>

Salin selepas log masuk

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