Walaupun ia tidak semestinya sukar, imej yang berpusat pada halaman web anda mungkin lebih terlibat daripada yang anda fikirkan. Sebab utama adalah bahawa tag adalah elemen sebaris, jadi ia bertindak berbeza daripada elemen peringkat blok. Beberapa pendekatan menggunakan HTML; orang lain menggunakan CSS, dan sesetengahnya dianggap lebih "sesuai" daripada yang lain kerana mereka tidak dipakai. Untuk meneruskan, pilih kaedah dari senarai di bawah dan ikuti arahan.

Untuk sokongan dalam HTML5, anda harus menggunakan atribut gaya dengan nilai -align teks: pusat di dalam elemen peringkat blok; seperti a tag.

Contoh kod HTML

Petua: Menambah gaya sebaris seperti yang ditunjukkan di atas hanya perlu dilakukan sekali, jika anda perlu memusatkan banyak imej, anda harus menggunakan cadangan di bawah dan buat kelas CSS untuk membantu mengurangkan kod berlebihan dan mempercepatkan laman web anda.

Contoh pusat imej yang menggunakan kod di atas

Menukar ke elemen peringkat blok

Salah satu cara anda boleh memusatkan imej dengan betul ialah untuk menentukan elemen sebagai elemen peringkat blok. Untuk melakukan ini, tambahkan peraturan ke kepala halaman anda (ditunjukkan dalam contoh berikut), atau fail CSS luaran yang dipautkan.

Contoh kod HTML

 .centerImage {text-align: center; paparan: blok; } 

Dengan kod ini, anda boleh memohon kelas centerImage ke tag tanpa perlu sarangnya dalam elemen peringkat blok. Kaedah ini berfungsi untuk pelbagai imej.

Contoh kod imej berpusat

Menggunakan tag

Anda boleh memusatkan gambar dengan melampirkan tanda dalam tag. Tindakan ini memusatkan itu, dan hanya itu, gambar di laman web. Perlu diingatkan bahawa kaedah ini tidak digunakan dalam HTML5 dan tidak akan selalu berfungsi dalam semua pelayar yang akan maju. Kami hanya mengesyorkan menggunakan kaedah ini jika tiada cadangan lain yang disebutkan di atas berfungsi di mana anda cuba memusatkan imej.

Contoh kod HTML