Css 如何在'；s居中收缩以适应？

这可以在没有媒体查询或javascript的情况下完成吗？

我有一组块，我想显示内联和左对齐的收缩，以适应容器。我还希望它们的组在浏览器窗口中水平居中

我的第一个想法是：

body {
  text-align: center;     /* center the group/container */
}
.container {
  display: inline-block;  /* shrink-to-fit */
  text-align: left-align; /* left-align the blocks */
}
.block {
  display: inline-block;  /* left-align the blocks */
}

这是不成功的，因为一旦块包裹到一条新线，容器就会扩展到身体的100%。结果是块组左对齐。

尝试以下操作：

body{ 
    width: 100%;
    text-align: center;         
}

.container{
    max-width: 80%;
    display: inline-block;
}

.block{
    float: left;
} 

---

这里有一个[不完美的]解决方案。可以将不可见占位符添加到内联块的末尾。这将左对齐最后一行

但是，如果不填充第一行，整个内容将显示为左对齐

HTML:

<!--
  Centers a group of boxes that wrap to the width of its container.
  Also left-aligns them inside the container.
  Issue: Does not center group if there aren't enough boxes to fill
  the first row.
  -->
<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>

    <!--
      How many placeholders do you need?
      At least the number of blocks minus two.
      -->
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
</div>

body {
    text-align: center;     /* center a max-width container */
    font-size: 0;           /* remove spaces between blocks */
}
.container {                /* you don't need this */
    background-color: #eee; /* so you can see what's happening */
    max-width: 960px;       /* to demonstrate the centering of a max-width container */
    display: inline-block;  /* center the max-width container */
    text-align: center;     /* center the group of blocks */
}
.block {
    display: inline-block;  /* left-align within the group */
    background-color: red;  /* so you can see what's happening */
    height: 100px;
    width: 100px;
    margin: 10px;
}
.placeholder {
    display: inline-block;  /* add to the line of blocks */
    width: 120px;           /* width + margin of a block */
}

---

仅供参考：它的

文本对齐：左不
左对齐
--您还可以创建一个演示来显示您提到的结果吗？可能的重复也可能重复：这些都没有回答问题。他们都说没有媒体查询或javascript是不可能的。但这家伙有个解决办法：谢谢你的回复。在这种情况下，容器的宽度由窗口决定。如果宽度略宽于一行块，则块组将显示稍偏左的中心。你明白我的意思吗？是的，我明白你说的。尝试更新的答案。它应该会起作用。还可以根据需要为“.block”添加宽度、高度和边距。谢谢，但这与原始解决方案存在相同的问题。哦，对不起，现在我明白你的意思了。你问题中的图片令人困惑。我不知道这是否是可行的，只是与CSS和没有媒体查询。另外，您发布的答案不是响应性设计。您只是在硬编码不可见的块。使用javascript/jquery是可行的，但是没有媒体查询的普通CSS是不行的。