Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Memusatkan Imej Dipotong Secara Mendatar Menggunakan CSS?

Bagaimana untuk Memusatkan Imej Dipotong Secara Mendatar Menggunakan CSS?

Patricia Arquette
Lepaskan: 2024-10-27 02:57:03
asal
522 orang telah melayarinya

How to Center a Cropped Image Horizontally Using CSS?

Cara Menjajarkan Imej Secara Mendatar Menggunakan CSS

Apabila cuba memusatkan imej secara mendatar, CSS menyediakan penyelesaian yang berkesan. Dalam soalan ini, pengguna memaparkan imej menggunakan HTML dan memangkasnya menggunakan CSS. Walau bagaimanapun, mereka menghadapi kesukaran untuk memusatkan imej yang dipangkas.

Untuk menyelesaikan isu ini, peraturan CSS berikut boleh digunakan:

<code class="css">.center img {        
  display:block;
  margin-left:auto;
  margin-right:auto;
}</code>
Salin selepas log masuk

Dengan menambahkan kelas tengah pada elemen imej, ia boleh dipusatkan secara mendatar:

<code class="html"><div id="loading" class="loading-invisible">  
    <img class="loading center" src="logo.png">
</div></code>
Salin selepas log masuk

Peraturan CSS ini mencapai kesan yang diingini dengan menetapkan imej untuk dipaparkan sebagai elemen blok dan melaraskan jidar kiri dan kanan secara automatik. Ini menyebabkan imej berada di tengah dalam bekasnya.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Imej Dipotong Secara Mendatar Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan