Bagaimana untuk memaparkan html di tengah

Cara untuk memaparkan HTML di tengah

Dalam reka bentuk web, paparan memusatkan ialah kaedah reka letak yang sangat biasa. Untuk pembangun halaman HTML, cara memusatkan elemen adalah kemahiran penting. Dalam artikel ini, kita akan melihat beberapa cara untuk memusatkan HTML.

1. Memusatkan teks

Untuk teks dalam halaman HTML, anda boleh memusatkannya dengan mudah menggunakan CSS. Sebagai contoh, tambahkan kod berikut pada fail CSS anda:

text-align: center;

Kod ini akan memusatkan semua teks dalam elemen.

2. Elemen peringkat blok berpusat

Unsur peringkat blok merujuk kepada DIV, P, H1 dan elemen lain. Untuk memusatkan elemen ini, kita boleh menggunakan sifat margin. Kod berikut akan memusatkan elemen DIV secara mendatar:

div {
  margin: 0 auto;
}

Ini akan memberikan jarak yang sama pada sisi kiri dan kanan elemen DIV dan memusatkan elemen secara mendatar.

3. Pusatkan imej

Memusatkan imej juga merupakan kemahiran yang perlu digunakan oleh pembangun. Kita boleh memusatkan imej menggunakan atribut penjajaran teks dengan menulis kod berikut dalam HTML:

<div style="text-align:center;">
  <img src="img/logo.jpg" alt="Logo">
</div>

Kod di atas meletakkan imej dan penerangannya dalam DIV dan memusatkan DIV. Anda boleh mengawal saiz imej dengan menetapkan lebar dan ketinggian DIV.

4. Tengah jadual

Jika anda perlu memusatkan jadual dalam halaman HTML, anda boleh menggunakan atribut jidar dan penjajaran teks. Kod berikut menunjukkan cara untuk memusatkan jadual:

table {
  margin: 0 auto;
  text-align: center;
}

Kod ini memusatkan jadual secara mendatar dan memusatkan data dalam jadual dalam lajur.

5. Paparan berpusat elemen lebar tetap

Apabila anda perlu memusatkan elemen lebar tetap, kami boleh menggunakan kod CSS berikut:

.element {
  position: absolute;
  left: 50%;
  margin-left: -[元素宽度的一半];
}

Ini akan menjadikan elemen relatif kepada elemen induk Tetapkan jarak ke kiri kepada 50% dan gerakkannya separuh lebar elemen ke kiri untuk memusatkannya.

6. Reka letak Flexbox

Akhir sekali, kami juga boleh menggunakan reka letak flexbox untuk mencapai paparan berpusat. Flexbox ialah susun atur bendalir yang mengoptimumkan cara elemen disusun pada halaman. Berikut ialah contoh:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Tambahkan kod di atas pada bekas dalam fail HTML anda untuk memusatkan kandungan dalam bekas.

Ringkasan

Paparan berpusat ialah salah satu teknik asas dalam reka bentuk halaman HTML. Sama ada teks, imej, jadual atau elemen lebar tetap, anda boleh menggunakan teknik yang berbeza untuk mencapai pemusatan. Apabila pembangun menguasai teknik ini, mereka akan lebih selesa mencipta halaman yang cantik dan menarik perhatian.

Atas ialah kandungan terperinci Bagaimana untuk memaparkan html di tengah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!