Saya mempunyai bekas dengan lebar maksimum: 80 rem dan margin-inline: auto dan apabila saya menggunakannya pada grid ia berfungsi dengan sempurna dengan memusatkan grid dari 80 rem
//i want to put container class here adventure
Tetapi saya ingin meletakkan kelas kontena dalam sel pengepala item tetapi ia tidak berfungsi, ia memusatkan semua kandungan pengepala tanpa mencapai saiz 80rem, saya tidak faham mengapa? Saya tahu tentang ils kerana margin-inline tetapi biasanya ia berpusat pada 80rem dan bukan sebelum ini.
.flex { display: flex; gap: var(--gap, 2rem); } .grid-container { height: 100vh; display: grid; grid-template-rows: min-content 1fr; text-align: center; } .container { max-width: 80rem; margin-inline: auto; }
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Apabila kelas "bekas" digunakan pada anak "bekas grid" induk
div时，它具有max-width: 80rem;和margin-inline:自动；。因此，当视口宽度大于 80rem 时，可用的内联边距将被分割并平均应用于div及其父项 (body) 之间，其中div居中>div。header是div, maka kelas itu mempunyai penjajaran kiri lalai dalam bekasnya.header时，div的宽度不受限制，并且header现在已划分并应用所有可用的内联边距位于其自身和div之间，导致header居中。可用边距来自headersebenar(hampir 40rem), bukan daripada pengisytiharan lebar maksimum.Jika anda hanya mahu
header有最大宽度而不是main，您可以通过添加width: 100% 来实现您想要的结果到.container.flex { display: flex; gap: var(--gap, 2rem); } .grid-container { height: 100vh; display: grid; grid-template-rows: min-content 1fr; text-align: center; } .container { width: 100%; max-width: 80rem; margin-inline: auto; }