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.
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 id="Vertically-Align-Elements">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<!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 id="Vertically-Align-Elements">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>
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.
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 id="Vertically-Aligned-Element">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<!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 id="Vertically-Aligned-Element">Vertically Aligned Element</h1>
<p>Use the line-height property:</p>
<div id="demo">
<p>This is demo text</p>
</div>
</body>
</html>
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 -
- 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 id="Vertically-Align-Element">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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Dalam JavaFX, apakah elemen laluan yang berbeza?
Aug 28, 2023 pm 12:53 PM
Pakej javafx.scene.shape menyediakan beberapa kelas dengan mana anda boleh melukis pelbagai bentuk 2D, tetapi ini hanyalah bentuk primitif seperti garisan, bulatan, poligon dan elips dll... Jadi jika anda ingin melukis kompleks Untuk bentuk tersuai, anda perlu untuk menggunakan kelas Path. Kelas laluan Kelas laluan Anda boleh melukis laluan tersuai menggunakan garis besar geometri ini yang mewakili bentuk. Untuk melukis laluan tersuai, JavaFX menyediakan pelbagai elemen laluan, kesemuanya tersedia sebagai kelas dalam pakej javafx.scene.shape. LineTo - Kelas ini mewakili baris elemen laluan. Ia membantu anda melukis garis lurus dari koordinat semasa ke koordinat (baru) yang ditentukan. HlineTo - Ini adalah jadual
Program C++: menambah elemen pada tatasusunan
Aug 25, 2023 pm 10:29 PM
Tatasusunan ialah struktur data jujukan linear yang digunakan untuk menyimpan data homogen di lokasi memori bersebelahan. Seperti struktur data lain, tatasusunan mesti mempunyai keupayaan untuk memasukkan, memadam, melintasi dan mengemas kini elemen dalam beberapa cara yang cekap. Dalam C++, tatasusunan kami adalah statik. C++ juga menyediakan beberapa struktur tatasusunan dinamik. Untuk tatasusunan statik, elemen Z boleh disimpan dalam tatasusunan. Setakat ini kita mempunyai n elemen. Dalam artikel ini, kita akan belajar cara memasukkan elemen pada penghujung tatasusunan (juga dikenali sebagai menambahkan elemen) dalam C++. Fahami konsep melalui contoh Penggunaan kata kunci ‘ini’ adalah seperti berikut: GivenarrayA=[10,14,65,85,96,12,35,74,69]Selepas.
Kesan peralihan CSS: bagaimana untuk mencapai kesan gelongsor elemen
Nov 21, 2023 pm 01:16 PM
Kesan peralihan CSS: Bagaimana untuk mencapai kesan gelongsor elemen Pengenalan: Dalam reka bentuk web, kesan dinamik elemen boleh meningkatkan pengalaman pengguna, antaranya kesan gelongsor adalah kesan peralihan yang biasa dan popular. Melalui sifat peralihan CSS, kita boleh mencapai kesan animasi gelongsor elemen dengan mudah. Artikel ini akan memperkenalkan cara menggunakan sifat peralihan CSS untuk mencapai kesan gelongsor elemen dan menyediakan contoh kod khusus untuk membantu pembaca memahami dan menggunakan dengan lebih baik. 1. Pengenalan kepada peralihan atribut CSS peralihan atribut peralihan CSS tra
Transformasi CSS: bagaimana untuk mencapai kesan putaran elemen
Nov 21, 2023 pm 06:36 PM
Transformasi CSS: Cara untuk mencapai kesan putaran elemen memerlukan contoh kod khusus Dalam reka bentuk web, kesan animasi adalah salah satu cara penting untuk meningkatkan pengalaman pengguna dan menarik perhatian pengguna, dan animasi putaran adalah salah satu yang lebih klasik. Dalam CSS, anda boleh menggunakan atribut "transform" untuk mencapai pelbagai kesan ubah bentuk elemen, termasuk putaran. Artikel ini akan memperkenalkan secara terperinci cara menggunakan "transform" CSS untuk mencapai kesan putaran elemen, dan memberikan contoh kod khusus. 1. Cara menggunakan "transf" CSS
Apakah elemen yang tidak disokong oleh html5
Aug 11, 2023 pm 01:25 PM
Elemen yang tidak disokong oleh HTML5 ialah elemen ekspresif semata-mata, elemen berasaskan bingkai, elemen aplikasi, elemen boleh diganti dan elemen bentuk lama. Pengenalan terperinci: 1. Elemen ekspresif tulen, seperti fon, tengah, s, u, dsb., elemen ini biasanya digunakan untuk mengawal gaya teks dan reka letak 2. Elemen berasaskan bingkai, seperti bingkai, set bingkai dan tanpa bingkai; elemen digunakan dalam Pada masa lalu, ia digunakan untuk membuat reka letak halaman web dan tetingkap belah 3. Elemen berkaitan aplikasi, seperti applet, isinde, dsb.
Pelaksanaan skrip pelayar terjemahan penanda perkataan berdasarkan API ChatGPT
May 01, 2023 pm 03:28 PM
Prakata Baru-baru ini, terdapat skrip pelayar berdasarkan ChatGPTAPI di GitHub, openai-translator Dalam tempoh yang singkat, bintang itu telah mencapai 12k Selain menyokong terjemahan, ia juga menyokong fungsi penggilap dan ringkasan -in, ia juga menggunakan pembungkusan tauri Jika anda mempunyai klien desktop, selain daripada fakta bahawa tauri menggunakan bahagian karat, bahagian pelayar masih agak mudah untuk dilaksanakan Hari ini kami akan melaksanakannya secara manual. Antara muka yang disediakan oleh openAI, sebagai contoh, kita boleh menyalin kod berikut dan memulakan permintaan dalam konsol penyemak imbas untuk melengkapkan terjemahan //Const constOPENAI_API_KEY="s
Cara melaksanakan susun atur dengan menu navigasi tetap menggunakan HTML dan CSS
Oct 26, 2023 am 11:02 AM
Cara menggunakan HTML dan CSS untuk melaksanakan susun atur dengan menu navigasi tetap Dalam reka bentuk web moden, menu navigasi tetap adalah salah satu susun atur biasa. Ia boleh memastikan menu navigasi sentiasa berada di bahagian atas atau sisi halaman, membolehkan pengguna menyemak imbas kandungan web dengan mudah. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk melaksanakan reka letak dengan menu navigasi tetap dan memberikan contoh kod khusus. Mula-mula, anda perlu mencipta struktur HTML untuk membentangkan kandungan halaman web dan menu navigasi. Berikut adalah contoh mudah
Apakah model kotak div
Oct 09, 2023 pm 05:15 PM
Model kotak div ialah model yang digunakan untuk reka letak halaman web Ia menganggap elemen dalam halaman web sebagai kotak segi empat tepat Model ini mengandungi empat bahagian: kawasan kandungan, padding, sempadan dan margin. Kelebihan model kotak div ialah ia boleh mengawal reka letak halaman web dengan mudah dan jarak antara elemen Dengan melaraskan saiz kawasan kandungan, jidar dalam, jidar dan jidar luar, pelbagai kesan susun atur boleh dicapai model kotak juga menyediakan beberapa Sifat dan kaedah boleh mengubah gaya dan tingkah laku kotak secara dinamik melalui CSS dan JavaScript.
