ホームページ  >  に質問  >  本文

place-content: center を使用した全幅 CSS グリッド項目

<p>次のように、CSS グリッドの <code>place-content:center</code> を使用して、固定コンテナ内で div を垂直方向と水平方向の中央に配置しました。 <p> <pre class="brush:css;toolbar:false;">.outer { 位置: 固定; インセット: 0; 背景: 黒; 表示: グリッド; 場所の内容: 中央; } .inner { パディング: 30px; 背景: 白; 幅: 100%; 最大幅: 500ピクセル; }</pre> <pre class="brush:html;toolbar:false;"><div class="outer"> <div class="inner">一部のコンテンツはここにあります</div> </div></pre> </p> <p>内部 div を全幅、最大幅 500px にしたいのですが、期待どおりに <code>width: 100%</code> 属性が尊重されないようです。 </p> <p> 誰かがこれが起こる理由と、可能であればグリッドの実装を維持したまま修正する方法を説明してもらえますか(このようなものを中央に配置する他の方法があることは知っていますが、好奇心からこれを試してみたかったのです)違いを生むことはもっと重要です何よりも重要です!)</p>
P粉245003607P粉245003607385日前409

全員に返信(2)返信します

  • P粉478188786

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

    グリッドの代わりにフレックスを使用できるため、これを非常に簡単に行うことができます。

    リーリー リーリー

    返事
    0
  • P粉020085599

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

    place-content を使用する代わりに、グリッド アイテムで place-self を使用できます。

    リーリー リーリー

    返事
    0
  • キャンセル返事