Bagaimana untuk memusatkan gambar dalam html

HTML (Hypertext Markup Language) ialah salah satu bahasa asas untuk mencipta halaman web. Dalam reka bentuk antara muka web, imej sering digunakan, jadi bagaimana untuk memusatkan imej dalam HTML?

Berikut ialah 3 kaedah, masing-masing dilaksanakan menggunakan CSS, jadual HTML dan teg HTML5.

Kaedah 1: Gunakan CSS untuk memusatkan imej

Anda boleh menggunakan sifat jidar CSS untuk memusatkan imej secara menegak dan mendatar.

Langkah:

1. Sisipkan imej dalam HTML:

<img src="图片路径" alt="图片描述">

2. Tetapkan gaya elemen img dalam fail CSS

img {
  display: block;
  margin: 0 auto;
}

Penjelasan:

• paparan: blok;
• margin: 0 auto digunakan untuk menetapkan jidar imej jika jidar kiri dan kanan ditetapkan kepada automatik, imej akan dipusatkan secara mendatar dalam bekasnya.

Kaedah 2: Gunakan jadual HTML untuk memusatkan imej

Anda boleh menggunakan elemen jadual HTML dan menjajarkan atribut untuk memusatkan imej secara menegak dan mendatar.

Langkah:

1. Buat jadual dalam HTML:

      <img src="图片路径" alt="图片描述">
    

2. Tetapkan atribut penjajaran jadual kepada "tengah":

      <img src="图片路径" alt="图片描述">
    

Penjelasan: Atribut penjajaran dalam elemen

• digunakan untuk menetapkan penjajaran menegak dan mendatar kandungan dalamannya.
• Jika anda menambah imej pada elemen dalam elemen

Kaedah 3: Gunakan teg HTML5 untuk memusatkan imej

HTML5 memperkenalkan beberapa teg semantik baharu, seperti

,

,

, < ; pengepala> dan Anda boleh menggunakan teg CSS atau HTML5 untuk memusatkan imej secara menegak dan mendatar.

Langkah:

1. Gunakan teg

   dan

   dalam HTML untuk mencipta imej:

  <img src="图片路径" alt="图片描述">
  
图片标题

2. dalam CSS Tetapkan gaya teg < figure> dan < img> blok imej, kapsyen boleh ditambahkan pada elemen

Helaian gaya CSS memberitahu penyemak imbas untuk menjadikan elemen

Ringkasan
• Melalui CSS, jadual HTML dan teg HTML5, kami boleh mencapai kesan pemusatan menegak dan mendatar imej dalam reka bentuk web. Anda boleh memilih kaedah yang paling sesuai dengan anda mengikut situasi sebenar.

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