Maison  >  Questions et réponses  >  le corps du texte

Éléments de grille CSS pleine largeur utilisant place-content : center

<p>J'ai utilisé <code>place-content: center</code> de CSS Grid pour centrer le div verticalement et horizontalement dans le conteneur fixe, comme ceci : </p> <p> <pre class="brush:css;toolbar:false;">.outer { poste : fixe ; encart : 0 ; fond : noir ; affichage : grille ; contenu du lieu : centre ; } .intérieur { remplissage : 30 px ; fond : blanc ; largeur : 100 % ; largeur maximale : 500 px ; }</pré> <pre class="brush:html;toolbar:false;"><div class="outer"> <div class="inner">Quelques contenus ici</div> </div></pre> </p> <p>Je veux que le div interne soit pleine largeur, avec une largeur maximale de 500 px, mais il ne semble pas respecter la propriété <code>width: 100%</code> </p> <p> Quelqu'un peut-il expliquer pourquoi cela se produit et comment y remédier, si possible en conservant l'implémentation de la grille (je sais qu'il existe d'autres façons de centrer quelque chose comme ça, mais par curiosité, je voulais essayer de faire en sorte que cela joue un rôle est plus plus important que toute autre chose)</p>
P粉245003607P粉245003607433 Il y a quelques jours450

répondre à tous(2)je répondrai

  • P粉478188786

    P粉4781887862023-09-06 14:48:14

    Vous pouvez utiliser flex au lieu de grille pour pouvoir le faire très facilement.

    .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>

    répondre
    0
  • P粉020085599

    P粉0200855992023-09-06 12:43:41

    Vous pouvez utiliser place-self,而不是使用 place-content sur les éléments de la grille.

    .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>

    répondre
    0
  • Annulerrépondre