如何在居中并缩小以适合的容器中左对齐块？

Question

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

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

我的第一个想法是：

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%。结果是该组块变为左对齐。

Answer 1

试试这个：

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

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

.block{
    float: left;
}

Answer 2

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

http://jsfiddle.net/aakt65x4/

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

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>

CSS:

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 */
}

如何在居中并缩小以适合的容器中左对齐块？

How do you left-align blocks in a container that's centered and shrinks to fit?

css

responsive-design