Ich habe einen Container mit max-width: 80 rem und margin-inline: auto und wenn ich ihn auf ein Raster anwende, funktioniert es perfekt, indem das Raster ab 80 rem zentriert wird
//i want to put container class here adventure
Aber ich möchte die Containerklasse in die Element-Header-Zelle einfügen, aber es funktioniert nicht. Es zentriert den gesamten Header-Inhalt, ohne die Größe von 80rem zu erreichen. Ich verstehe nicht, warum? Ich kenne ils aufgrund von margin-inline, aber normalerweise ist es bei 80rem zentriert und nicht davor.
.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; }
当“container”类应用于父“grid-container”
div时，它具有max-width: 80rem;和margin-inline:自动；。因此，当视口宽度大于 80rem 时，可用的内联边距将被分割并平均应用于div及其父项 (body) 之间，其中div居中>div。header是div的子级，因此它在其容器内具有默认的左对齐方式。header时，div的宽度不受限制，并且header现在已划分并应用所有可用的内联边距位于其自身和div之间，导致header居中。可用边距来自header的实际宽度（几乎 40rem），而不是来自 max-width 声明。如果您只想
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; }