Rumah > Artikel > hujung hadapan web > Bagaimana untuk memusatkan teks (mendatar dan menegak) dalam blok div?
Bagaimana untuk memusatkan teks (mendatar dan menegak) dalam blok div?
- 王林ke hadapan
- 2023-09-09 11:29:07889semak imbas
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>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>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>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>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!