Item grid CSS lebar penuh menggunakan place-content: center
P粉245003607
P粉245003607 2023-09-05 17:54:47
0
2
462
<p>Saya menggunakan <code>place-content: center</code> CSS Grid untuk memusatkan div secara menegak dan mendatar dalam bekas tetap, seperti ini: </p> <p> <pre class="brush:css;toolbar:false;">.luar { kedudukan: tetap; sisipan: 0; latar belakang: hitam; paparan: grid; tempat-kandungan: pusat; } .dalaman { padding: 30px; latar belakang: putih; lebar: 100%; lebar maksimum: 500px; }</pre> <pre class="brush:html;toolbar:false;"><div class="outer"> <div class="inner">Sesetengah kandungan di sini</div> </div></pre> </p> <p>Saya mahu div dalam menjadi lebar penuh, dengan lebar maksimum 500px, tetapi ia nampaknya tidak menghormati <kod>lebar: 100%</code> </p> <p> 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>
P粉245003607
P粉245003607

membalas semua(2)
P粉478188786

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%;
}
<div class="outer">
  <div class="inner">Some content here</div>
</div>
P粉020085599

Anda boleh menggunakan place-self,而不是使用 place-content pada item grid.

.outer {
  position: fixed;
  inset: 0;
  background: black;
  display: grid;
}

.inner {
  padding: 30px;
  background: white;
  width: 100%;
  max-width: 500px;
  place-self: center;
}
<div class="outer">
  <div class="inner">Some content here</div>
</div>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan