Bagaimana untuk memusatkan gambar dalam html

Dalam reka bentuk web, penggunaan imej menjadi semakin biasa, tetapi cara untuk memusatkan imej pada halaman adalah soalan yang sering ditanya.

Untuk memaparkan imej di tengah halaman web, anda perlu menggunakan kod HTML dan CSS untuk mencapainya. Seterusnya, mari kita lihat langkah-langkah khusus.

1. Tetapkan imej dalam kod HTML

Untuk menambah imej pada halaman web, anda perlu menggunakan kod HTML. Kita boleh menggunakan kod berikut untuk menambah imej:

<img src="图片地址" alt="图片描述">

Antaranya, atribut src mewakili alamat imej dan atribut alt mewakili perihalan imej. Apabila imej tidak dapat dipaparkan, penyemak imbas akan memaparkan kandungan atribut alt.

Dalam kod, kami boleh menggunakan gaya CSS untuk mengawal saiz dan kedudukan imej.

2. Gunakan kod CSS untuk menetapkan lebar dan ketinggian imej

Dalam kod CSS, kita boleh menggunakan atribut width dan height untuk mengawal saiz daripada imej itu. Contohnya:

img {
  width: 50%;
  height: auto;
}

Kod ini akan menjadikan lebar imej 50% daripada lebar halaman dan ketinggian akan dilaraskan secara automatik secara berkadar.

3. Gunakan kod CSS untuk menetapkan penjajaran imej

Untuk menjadikan imej kelihatan berpusat, anda boleh menggunakan atribut text-align untuk menetapkan penjajaran mendatar bagi imej. Contohnya:

body {
  text-align: center;
}

img {
  display: inline-block;
  margin: auto;
}

Kod ini akan memusatkan semua elemen pada halaman, kemudian gunakan atribut display untuk menetapkan imej sebagai elemen peringkat blok sebaris dan gunakan atribut margin untuk menjajarkan secara menegak imej ke tengah halaman.

Menggunakan kod HTML dan CSS mudah ini, kami boleh memusatkan imej pada halaman web. Sudah tentu, ini hanyalah salah satu kaedah, dan terdapat banyak cara lain untuk mencapai penjajaran imej. Walau bagaimanapun, kaedah ini agak mudah dan praktikal, sesuai untuk dipelajari dan digunakan oleh orang baru.

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