简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > html tutorial > teks badan

Bagaimana untuk memusatkan kotak div dalam html

下次还敢
Lepaskan： 2024-04-05 08:00:20
asal
1118 orang telah melayarinya

Terdapat enam cara untuk memusatkan kotak div dalam HTML: atribut penjajaran teks, Flexbox, Grid, margin: auto, kedudukan mutlak dan atribut bekas flex. Pilihan kaedah tertentu bergantung pada saiz, lokasi dan keperluan susun atur kotak.

Bagaimana untuk memusatkan kotak div dalam html

html Cara Pusat Kotak Div ​​

in HTML, anda boleh memusatkan kotak div dengan cara berikut:

1 

<code class="html"><div style="text-align: center;">
  内容
</div></code>
Salin selepas log masuk

3. Gunakan Grid

<code class="html"><div style="display: flex; justify-content: center; align-items: center;">
  内容
</div></code>
Salin selepas log masuk

4 Gunakan margin: auto

<code class="html"><div style="display: grid; place-items: center;">
  内容
</div></code>
Salin selepas log masuk

5 kaedah yang anda pilih bergantung pada saiz kotak, lokasi dan keperluan susun atur.

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

Label berkaitan：
kedudukan mutlak
sumber：php.cn
Artikel sebelumnya：Bagaimana untuk menulis kod garis putus-putus html Artikel seterusnya：Bagaimana untuk menukar warna fon dalam html
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
Isu terkini
Dalam paparan mudah alih, bagaimana saya boleh menutup bar navigasi ini apabila pengguna mengklik pada pautan? Apabila pengguna mengklik pautan untuk menyemak imbas tapak web, bar navigasi tidak ditutu...
daripada 2024-04-06 19:23:03
0
1
411
Bandingkan Imagick, Adobe Photoshop dan Windows - Kesan resolusi (piksel per sentimeter atau piksel per inci) Ini bukan soalan tetapi percubaan untuk meningkatkan pemahaman saya tentang cara DPI disim...
daripada 2024-04-06 16:01:27
0
1
397
React Three Fiber: Mengapa acara skrol saya ketinggalan? Dalam ReactThreeFiber, saya mempunyai komponen React yang menghasilkan sprite yang saya ma...
daripada 2024-04-06 13:39:24
0
1
410
Pelapik ibu bapa tidak diendahkan oleh anak yang berkedudukan melekit Bagaimana untuk mengelakkan unsur melekit daripada berada di belakang pengepala? Coretan k...
daripada 2024-04-06 11:42:51
0
1
338
vue vee-validate menangkap masalah pemilihan pemilih tarikh Ikatan model v pada medan pemetik tarikh saya tidak berfungsi dengan betul. Apabila anda m...
daripada 2024-04-06 11:38:56
0
1
510
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！