hujung hadapan web
html tutorial
Bagaimana untuk memusatkan teks (mendatar dan menegak) dalam blok div?
Bagaimana untuk memusatkan teks (mendatar dan menegak) dalam blok div?
Kita boleh dengan mudah memusatkan teks secara mendatar dan menegak di dalam div. Mari kita lihat satu persatu.
Gunakan sifat penjajaran teks untuk memusatkan teks dalam Div secara mendatar
Untuk memusatkan teks dalam div secara mendatar, gunakan sifat penjajaran teks. Atribut penjajaran teks menentukan penjajaran kotak baris dalam elemen peringkat blok. Berikut adalah nilai yang mungkin -
kiri - Tepi kiri setiap kotak baris dijajarkan dengan tepi kiri kawasan kandungan elemen peringkat blok.
kanan - Tepi kanan setiap kotak baris dijajarkan dengan tepi kanan kawasan kandungan elemen peringkat blok.
center - Bahagian tengah setiap kotak baris dijajarkan dengan pusat kawasan kandungan elemen peringkat blok.
justify - Tepi setiap kotak baris hendaklah diselaraskan dengan tepi kawasan kandungan elemen peringkat blok.
String - Kandungan sel dalam lajur akan diselaraskan pada rentetan yang diberikan.
Contoh
Sekarang mari kita tengahkan teks dalam div secara mendatar menggunakan sifat penjajaran teks -
<!DOCTYPE html>
<html>
<head>
<title>Align Horizontally</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
text-align: center;
}
</style>
</head>
<body>
<h1 id="Software-Quality-Management">Software Quality Management</h1>
<p>Software Quality Management ensures the required level of software quality is achieved.
</p>
<div class="demo">
<p>This text in div is centered horizontally.</p>
</div>
</body>
</html>
Gunakan sifat justify-content untuk memusatkan teks secara mendatar dalam Div
Contoh
Untuk memusatkan teks dalam div secara mendatar, gunakan sifat justify-content. Sekarang mari kita lihat contoh
<!DOCTYPE html>
<html>
<head>
<title>Align Horizontally</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<h1 id="Software-Quality-Management">Software Quality Management</h1>
<p>Software Quality Management ensures the required level of software quality is achieved.
</p>
<div class="demo">
<p>This text in div is centered horizontally.</p>
</div>
</body>
</html>
Gunakan sifat pelapik untuk memusatkan teks secara menegak dalam Div
Untuk memusatkan teks secara menegak dalam div, gunakan sifat padding. Sifat padding membolehkan anda menentukan jumlah ruang yang sepatutnya muncul antara kandungan elemen dan sempadannya. Sifat CSS berikut boleh digunakan untuk mengawal senarai. Anda juga boleh menetapkan nilai yang berbeza untuk padding pada setiap sisi kotak menggunakan sifat berikut -
- padding-bottom Menentukan pelapik bawah elemen.
- padding-top Menentukan padding atas elemen.
- padding-left menentukan padding kiri elemen.
- padding-right Menentukan padding yang betul bagi elemen.
- padding digunakan sebagai singkatan untuk sifat-sifat yang disebutkan di atas.
Contoh
Sekarang mari kita lihat contoh teks berpusat menegak dalam div menggunakan sifat padding -
<!DOCTYPE html>
<html>
<head>
<title>Align Vertically</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
padding: 50px 0;
}
</style>
</head>
<body>
<h1 id="Software-Quality-Management">Software Quality Management</h1>
<p>Software Quality Management ensures the required level of software quality is achieved.
</p>
<div class="demo">
<p>This text in div is centered vertically.</p>
</div>
</body>
</html>
Gunakan sifat ketinggian garis untuk memusatkan teks secara menegak dalam Div
Untuk memusatkan teks dalam div secara menegak, gunakan sifat ketinggian garis. Sifat garis-tinggi mengubah suai ketinggian kotak sebaris yang membentuk baris teks.
Berikut ialah nilai yang mungkin -
Normal - Mengarahkan penyemak imbas untuk menetapkan ketinggian garisan dalam elemen kepada jarak yang "munasabah".
nombor - Ketinggian sebenar baris 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.
Contoh
Sekarang mari kita lihat contoh teks berpusat menegak dalam div menggunakan sifat ketinggian garis -
<!DOCTYPE html>
<html>
<head>
<title>Align Vertically</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
line-height: 150px;
height: 200px;
}
</style>
</head>
<body>
<h1 id="Software-Quality-Management">Software Quality Management</h1>
<p>Software Quality Management is a process that ensures the required level of software
quality is achieved.</p>
<div class="demo">
<p> This text in div is centered vertically.</p>
</div>
</body>
</html>
Atas ialah kandungan terperinci Bagaimana untuk memusatkan teks (mendatar dan menegak) dalam blok 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
Bagaimana untuk memusatkan imej dalam halaman web html
Apr 05, 2024 pm 12:18 PM
Dalam HTML, terdapat dua cara untuk menyelaraskan imej: gunakan CSS: margin: 0 auto untuk memusatkan imej secara mendatar, dan paparan: blok untuk menjadikannya menempati keseluruhan lebar. Gunakan elemen HTML: <center> untuk memusatkan imej secara mendatar, tetapi ia kurang fleksibel dan tidak mematuhi piawaian web terkini.
Bagaimana untuk melaraskan kedudukan teks dalam dreamweaver
Apr 09, 2024 am 02:24 AM
Melaraskan kedudukan teks dalam Dreamweaver boleh diselesaikan dengan langkah berikut: Pilih teks dan gunakan pelaras kedudukan teks untuk membuat pelarasan mendatar: penjajaran kiri, penjajaran kanan, penjajaran tengah 2. Buat pelarasan menegak: penjajaran atas, penjajaran bawah, menegak tengah; 3. Tekan kekunci Shift dan gunakan kekunci anak panah untuk memperhalusi kedudukan 4. Gunakan kekunci pintasan untuk menjajarkan dengan cepat: penjajaran kiri (Ctrl/Cmd + L), penjajaran kanan (Ctrl/Cmd + R), penjajaran tengah; (Ctrl/Cmd + C).
Bagaimana untuk memusatkan kotak teks dalam html
Apr 22, 2024 am 10:33 AM
Terdapat banyak cara untuk memusatkan kotak teks HTML: kotak input teks: gunakan input kod CSS[type="text"] { text-align: center } text area: use the CSS code textarea { text-align: center; } pemusatan mendatar: Gunakan gaya penjajaran teks: tengah pada elemen induk kotak teks untuk memusatkannya secara menegak: gunakan input atribut penjajaran menegak[type="text"] { vertical-align: middle }Flexbox: use display:
Bagaimana untuk memusatkan kandungan ul dalam css
Apr 26, 2024 pm 12:24 PM
Pusatkan kandungan UL dalam CSS: Gunakan sifat penjajaran teks: Tetapkan penjajaran teks, termasuk kandungan item senarai. Gunakan atribut margin: Tetapkan margin kiri dan kanan elemen, dan gunakan margin: auto untuk mencapai pemusatan mendatar. Gunakan atribut paparan: Tetapkan elemen kepada inline-block, kemudian tengahkannya secara menegak menggunakan text-align: center. Gunakan sifat flexbox: Pemusatan mendatar dan menegak melalui justify-content: center dan align-item: center.
Analisis dan penyelesaian kepada punca tipografi tidak sejajar dalam WordPress
Mar 05, 2024 am 11:45 AM
Analisis dan penyelesaian kepada punca tipografi tidak sejajar dalam WordPress Apabila membina tapak web menggunakan WordPress, anda mungkin menghadapi tipografi tidak sejajar, yang akan menjejaskan keindahan keseluruhan dan pengalaman pengguna tapak web. Terdapat banyak sebab untuk salah jajaran tipografi, yang mungkin disebabkan oleh isu keserasian tema, konflik pemalam, konflik gaya CSS, dsb. Artikel ini akan menganalisis punca biasa tipografi tidak sejajar dalam WordPress dan menyediakan beberapa penyelesaian, termasuk contoh kod khusus. 1. Analisis Sebab Isu Keserasian Tema: Beberapa WordPress
Bagaimana untuk memusatkan fon dalam sublime
Apr 03, 2024 am 10:21 AM
Kaedah untuk menjajarkan teks dalam Teks Sublime termasuk: menggunakan kekunci pintasan (perenggan: Ctrl + Alt + C, baris tunggal: Ctrl + Alt + E), menggunakan pilihan "Sejajar" dalam bar menu dan memasang pemalam penjajaran (seperti sebagai AlignTab, Alignment Plugin ), atau penjajaran manual (berpusat: mengisi ruang, wajar: mencipta sempadan).
Bagaimana untuk memusatkan bingkai dalam html
Apr 22, 2024 am 10:45 AM
Terdapat empat cara untuk memusatkan bingkai HTML: margin: 0 auto;: Pusatkan bingkai secara mendatar. text-align: center;: Tengahkan kandungan bingkai secara mendatar. paparan: flex; align-item: center;: Pusatkan bingkai secara menegak. kedudukan: mutlak; atas: 50%; kiri: 50%; ubah: terjemah(-50%, -50%);: Menggunakan transformasi CSS untuk meletakkan bingkai di tengah-tengah bekas bersaiz tetap.
Panduan untuk menyelesaikan salah jajaran halaman web WordPress
Mar 05, 2024 pm 01:12 PM
Panduan untuk menyelesaikan halaman web WordPress yang tidak sejajar Dalam pembangunan tapak web WordPress, kadangkala kami menghadapi elemen halaman web yang tidak sejajar Ini mungkin disebabkan oleh saiz skrin pada peranti yang berbeza, keserasian penyemak imbas atau tetapan gaya CSS yang tidak betul. Untuk menyelesaikan salah jajaran ini, kita perlu menganalisis masalah dengan teliti, mencari kemungkinan punca dan nyahpepijat serta membaikinya langkah demi langkah. Artikel ini akan berkongsi beberapa masalah salah jajaran laman web WordPress biasa dan penyelesaian yang sepadan, dan memberikan contoh kod khusus untuk membantu membangunkan
