Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Memusatkan Imej Secara Mendatar dan Menegak Dalam Div Menggunakan CSS?

Bagaimana untuk Memusatkan Imej Secara Mendatar dan Menegak Dalam Div Menggunakan CSS?

Susan Sarandon
Lepaskan: 2024-11-24 09:36:12
asal
291 orang telah melayarinya

How to Center an Image Both Horizontally and Vertically Within a Div Using CSS?

Menjajarkan Imej Berpusat dan Menjajarkan Menegak Dalam Div

Untuk coretan HTML yang diberikan:

`


`

Melaraskan peletakan imej untuk dipusatkan secara mendatar dan menegak dalam div yang ditetapkan boleh dicapai menggunakan sifat CSS.

Untuk menjajarkan imej secara mendatar di tengah, gunakan:

#over img {
  margin-left: auto;
  margin-right: auto;
}
Salin selepas log masuk

Ini menjajarkan imej ke tepi kiri dan kanan div, menghasilkan peletakan berpusat.

Untuk menjajarkan imej secara menegak di tengah, tetapkan imej sebagai elemen peringkat blok menggunakan:

#over img {
  display: block;
}
Salin selepas log masuk

Ini membolehkan imej mengambil ketinggian penuh ruang yang tersedia dalam div.

Coretan HTML dan CSS yang dikemas kini menjadi:

<div>
Salin selepas log masuk
body {
  margin: 0;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Imej Secara Mendatar dan Menegak Dalam Div 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