J'ai un conteneur avec max-width : 80 rem et margin-inline : auto et quand je l'applique sur une grille cela fonctionne parfaitement en centrant la grille à partir de 80 rem
<div class="grid-container container"> <header class="primary-header flex "> //i want to put container class here <h1 class="logo uppercase text-white">adventure</h1> <button class="mobile-nav-toggle" aria-controls="primary-navigation" aria- expanded="false"><span class="sr-only">Menu</span></button> <nav class="flex"> <ul id="primary-navigation" class="primary-navigation flex text-white capitalise letter-spacing-3 fs-base" data-visible="false"> <li><a href="">home</a></li> <li><a href="">tours</a></li> <li><a href="">explore</a></li> <li><a href="">about</a></li> <li><button class="btn bg-pink text-white ">contact</button></li> </ul> </nav> </header> <main></main> </div>
Mais je veux mettre la classe conteneur dans la cellule d'entête de l'élément mais ça ne marche pas, ça centre tout le contenu de l'entête sans atteindre la taille de 80rem, je ne comprends pas pourquoi ? Je connais ils à cause de margin-inline mais généralement il est centré à 80rem et pas avant.
.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; }
Lorsque la classe "conteneur" est appliquée à un enfant du parent "grid-container"
div
时,它具有max-width: 80rem;
和margin-inline:自动;
。因此,当视口宽度大于 80rem 时,可用的内联边距将被分割并平均应用于div
及其父项 (body
) 之间,其中div
居中>div。header
是div
elle a donc un alignement à gauche par défaut dans son conteneur.
Lorsque la classe "conteneur" est appliquée à laheader
时,div
的宽度不受限制,并且header
现在已划分并应用所有可用的内联边距位于其自身和div
之间,导致header
居中。可用边距来自header
largeur réelle (presque 40rem), et non à partir de la déclaration max-width.Si tu veux juste
header
有最大宽度而不是main
,您可以通过添加width: 100% 来实现您想要的结果
到.container