検索

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

グリッド項目で最大幅のコンテナを使用する

max-width: 80 rem および margin-inline: auto のコンテナーがあり、それをグリッドに適用すると、グリッドを 80 rem から中央に配置することで完全に機能します

リーリー

しかし、コンテナ クラスをアイテム ヘッダー セルに配置したいのですが、正しく動作しません。80rem のサイズに達せずにすべてのヘッダー コンテンツが中央に配置されます。理由がわかりません。 margin-inline のおかげで ils については知っていますが、通常は 80rem を中心にしており、それ以前は中心ではありません。

ああああ

P粉387108772P粉387108772445日前384

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

  • P粉818125805

    P粉8181258052023-09-07 13:54:07

    "container" クラスが親の "grid-container" div に適用されると、max-width: 80rem; および margin-inline:auto になります。 ;。したがって、ビューポートの幅が 80rem より大きい場合、使用可能なインライン マージンは分割され、div とその親 (body) の間で均等に適用されます。ここで、 div中央に > div があります。 headerdiv の子であるため、コンテナ内ではデフォルトの左揃えになります。


    「container」クラスが header に適用されると、div の幅は制限されず、header は分割され、利用可能なすべてのインライン マージンが適用されます。それ自体と div の間で、header が中央に配置されます。利用可能なマージンは、max-width 宣言からではなく、headeractual 幅 (ほぼ 40rem) から得られます。


    main ではなく header のみを最大幅にしたい場合は、 width: 100% を追加することで希望の結果を得ることができます。 ###。容器######

    リーリー リーリー

    返事
    0
  • キャンセル返事