如何居中对齐容器父级？

问题描述 投票：0回答：1

我有一个

main
网格。它的网格项也是容器（
container-type: inline-size
），这有助于根据其宽度为它们提供各种内部布局。

一旦

main
超过一定宽度，如何将它居中对齐？
justify-self: center
和
margin: 0 auto
上的
main
都会使整个事情中断 - 您可以通过取消下面代码片段中这两行的注释来看到这一点。 
justify-content: center
也会发生同样的情况（在 
main
或 
body
上）。

展开下面的代码片段并调整视口大小，以查看为 

max-width
设置的 
main
上方发生的情况：它保留在左侧。我希望它水平居中对齐，但我尝试过的所有方法都会使它崩溃。

addEventListener('input', e => {
    document.body.style = `--${e.target.id}: 1`
})
/* basic reset, grid everything */
* { margin: 0; padding: 0 }
html, body, main, section, div, ul, figure { display: grid }
html { min-height: 100% }

body {
    /* body stle may override these two; 
     * they're mutually exclusive */
    /* 1 if images are _N_ext to each other, 0 otherwise */
    --_n: var(--n, 0);
    /* 1 if images are _S_tacked, 0 otherwise */
    --_s: var(--s, 0);
    
    font: clamp(.75em, 3.375vw, 1.25em)/ 1.25 sans-serif;
}

main {
    grid-gap: .5em;
    align-self: center;
    /* need this, but it collapses layout *
    justify-self: center;
  /* same happens with this *
    margin: 0 auto; /*  */
    padding: .5em;
    max-width: 800px
}

/* CSS variable indices for similar items */
:is(input, label, li, figure):nth-of-type(1) { --i: 0 }
:is(input, label, li, figure):nth-of-type(2) { --i: 1 }
:is(input, label, li, figure):nth-of-type(3) { --i: 2 }
:is(input, label, li, figure):nth-of-type(4) { --i: 3 }

.ctr {
    grid-gap: inherit;
    padding: inherit;
    background: gainsboro;
}

div { grid-gap: inherit }

.one, .two, .res {
    container-type: inline-size;
    
    * {
        /* a bunch of container size cases */
        --_cs0: var(--cs0, 1);
        --_cs1: var(--cs1, calc(1 - var(--_cs0)));
        --_cs2: var(--cs2, calc(1 - (var(--_cs0) + var(--_cs1))));
    }
}

/* SECTION 1 */
.boo, .foo {
    @container (min-width: 23em) { --cs0: 0 }
    @container (min-width: 32em) { --cs1: 0 }
}

.boo {
    grid-column: calc(2 - var(--_cs1))/ span calc(1 + var(--_cs1))
}

li {
    grid-column: calc(1 + var(--_cs1)*var(--i))
}

.foo {
    grid-area: calc(1 + var(--_cs1))/ 1;
    grid-template-columns: repeat(2, max-content)
}

.xtra {
    overflow: hidden;
    width: calc((1 - var(--_cs0))*9em)
}


/* SECTION 2 */
[name='c'], [for] {
    grid-area: 
        calc(1 + var(--i)*var(--_cs0))/ 
        calc(1 + var(--i)*var(--_cs1));
    
    @container (min-width: 20em) { --cs0: 0 }
}



/* SECTION 4 */
figure {
    grid-area: calc(1 + var(--_cs0)*var(--i)*var(--_n))/ 
        calc(1 + var(--_cs1)*var(--i)*var(--_n));
    max-width: 400px;
    aspect-ratio: 2/ calc(2 + var(--_s) + var(--_cs1)*var(--_n));
    
    @container (min-width: 20em) { --cs0: 0  }
}

img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: var(--pos)
}
<body style="--n: 1">
  <main>
    <section class="ctr one">
      <ul class="boo">
        <li>listitem</li>
        <li>listitem</li>
        <li>listitem</li>
        <li>listitem</li>
      </ul>
      <div class="foo">
        <div class="xtra">superfluous</div>
        <div class="main">
          <div>some</div>
          <div>essential</div>
          <div>shit</div>
          <div>keep it!</div>
        </div>
      </div>
    </section>
    <section class="ctr two">
      <input id="n" type="radio" name="c" checked="checked"/>
      <label for="n">side by side</label>
      <input id="s" type="radio" name="c"/>
      <label for="s">stacked</label>
    </section>
    <section class="ctr tre">
      <div>more stuff</div>
    </section>
    <section class="res">
      <figure><img src="https://images.unsplash.com/photo-1705630547844-29adf8323f28?w=800"/></figure>
      <figure><img src="https://images.unsplash.com/photo-1705630547844-29adf8323f28?w=800"/></figure>
    </section>
  </main>
</body>

css layout css-grid container-queries
1个回答
0
投票

@deEr。关于给

main
一个
width
的帖子给了我一个想法。 
main
需要在某个点之前保持灵活性，因此它会得到 
max-width
来防止它增长到超过该点。

但是...它也可以得到一个

width: min(100%, 800px)
而不是那个
max-width
。添加 
box-sizing: border-box
以防止溢出，因为它有 
padding
。

然后我之前尝试过的所有方法都不起作用，突然就起作用了！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.