我想要一些< section>跨整个页面宽度不超过特定像素宽度(此处为300px).如果页面(即该部分)比页面宽,则内容应水平居中.
为此,我目前正在使用一个小助手< div>其中a)定义了内容的最大宽度,b)使用水平自动边距将内容水平居中：
section {background-color: teal;}.content {max-width: 300px;margin: 0 auto;}
<section><div class="content">This text should be no wider than 300px.</div></section>
这很好用,但是我一直在努力摆脱这种< div>仅用于布局的元素.理想情况下,我可以使用padding之类的东西：0 auto;在< section>上元件.
最佳答案
您可以如下控制填充：
section {background-color: teal;padding:0 calc((100% - 300px)/2)}
<section>This text should be no wider than 300px.</section><section>This very long long long text should be no wider than 300px.</section>
这是使用CSS网格的另一个想法：
section {background-color: teal;display:grid;grid-template-columns:1fr minmax(auto,300px) 1fr;}/*to fill the 1fr (only the :before is mandatory) */section:before,section:after{content:"";}
<section>This text should be no wider than 300px.</section><section>This very long long long text should be no wider than 300px.</section>
section {background-color: teal;display:flex;}section:before,section:after{content:"";flex-basis:calc((100% - 300px)/2);flex-shrink:0;}
<section>This text should be no wider than 300px.</section><section>This very long long long text should be no wider than 300px.</section>
