Item grid CSS lebar penuh menggunakan place-content: center
P粉245003607
2023-09-05 17:54:47
<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>
Anda boleh menggunakan flex dan bukannya grid supaya anda boleh melakukan ini dengan mudah.
Anda boleh menggunakan
place-self
,而不是使用place-content
pada item grid.