Bagaimana untuk memusatkan teks (mendatar dan menegak) dalam blok div?-html tutorial-php.cn

Bagaimana untuk memusatkan teks (mendatar dan menegak) dalam blok div?

王林

Lepaskan： 2023-09-09 11:29:07

ke hadapan

893 orang telah melayarinya

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>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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!