Item grid CSS lebar penuh menggunakan place-content: center-Soal Jawab Rangkaian PHP Cina

Artikel Topik pembelajaran Muat turun Soal Jawab Kamus Pengaturcaraan Permainan kemas kini terkini

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Item grid CSS lebar penuh menggunakan place-content: center

P粉245003607 2023-09-05 17:54:47

389

Saya menggunakan place-content: center CSS Grid untuk memusatkan div secara menegak dan mendatar dalam bekas tetap, seperti ini:

.luar { kedudukan: tetap; sisipan: 0; latar belakang: hitam; paparan: grid; tempat-kandungan: pusat; } .dalaman { padding: 30px; latar belakang: putih; lebar: 100%; lebar maksimum: 500px; }

 Sesetengah kandungan di sini

Saya mahu div dalam menjadi lebar penuh, dengan lebar maksimum 500px, tetapi ia nampaknya tidak menghormati lebar: 100%

Bolehkah seseorang menerangkan mengapa ini berlaku dan bagaimana untuk membetulkannya, jika boleh mengekalkan pelaksanaan grid (saya tahu ada cara lain untuk memusatkan sesuatu seperti ini, tetapi kerana ingin tahu saya ingin mencuba memainkan peranan ini lebih penting daripada perkara lain)

P粉245003607

membalas semua (2)

P粉4781887862023-09-06 14:48:14 Tingkat 2

Anda boleh menggunakan flex dan bukannya grid supaya anda boleh melakukan ini dengan mudah.

.outer { position: fixed; width: 100%; height: 100%; background: black; display: flex; justify-content: center; align-items: center; } .inner { padding: 30px; background: white; width: 100%; }

 Some content here

Suka+0

Tambah Balasan

P粉0200855992023-09-06 12:43:41 Tingkat 1

Anda boleh menggunakanplace-self，而不是使用place-contentpada item grid.

.outer { position: fixed; inset: 0; background: black; display: grid; } .inner { padding: 30px; background: white; width: 100%; max-width: 500px; place-self: center; }