Rumah > Artikel > hujung hadapan web > Bagaimana untuk menjajarkan elemen secara menegak dalam div?
Bagaimana untuk menjajarkan elemen secara menegak dalam div?
- WBOYke hadapan
- 2023-08-20 17:37:191184semak imbas
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.
Terjemahan bahasa Cina bagi
Contohialah:
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>
Gunakan sifat ketinggian garis untuk menjajarkan elemen secara menegak dalam divAtribut 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.
Terjemahan bahasa Cina bagi
Contohialah:
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>
Gunakan atribut padding untuk menjajarkan elemen secara menegak dalam divSifat
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 -
- Padding-bottom
- menentukan pelapik bawah elemen. padding-top
- menentukan pelapik atas elemen. Lapik lapik-kiri
- menentukan pelapik kiri sesuatu elemen. Lapik padding-kanan
- menentukan pelapik yang betul bagi sesuatu elemen. padding
- berfungsi sebagai singkatan untuk sifat-sifat sebelumnya. Mari kita lihat contoh untuk menjajarkan elemen secara menegak dalam div menggunakan sifat padding −
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>
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!