居中 3 列网格内部 100% 宽度 Div

Question

我有一个 3 列网格，它位于一个 100% 的容器中 div。但截至目前，它只是一直被拉到页面的左侧。我希望三列 div 在容器内居中。这是我尝试编码的设计的屏幕截图：为了解决每个网格框之间的边距问题，我使用了技术 found here（向下滚动到最后一部分 "Roll your own...")

HTML:

<div class="featured-properties">
    <div class="properties">
        <div class="property">
            <img src="img/sample-prop-1.jpg" alt="Sample Property" />
        </div>

        <div class="property">
            <img src="img/sample-prop-2.jpg" alt="Sample Property" />
        </div>

        <div class="property">
            <img src="img/sample-prop-3.jpg" alt="Sample Property" />
        </div>

        <div class="property">
            <img src="img/sample-prop-4.jpg" alt="Sample Property" />
        </div>

        <div class="property">
            <img src="img/sample-prop-5.jpg" alt="Sample Property" />
        </div>

        <div class="property">
            <img src="img/sample-prop-6.jpg" alt="Sample Property" />
        </div>
    </div><!-- end .properties -->
</div><!-- end .featured-properties -->

CSS:

.featured-properties {
  width: 100%;
}


  .properties {
    margin: -79px;
    overflow: hidden;
    clear: both;
    width: 1047px;
  }

    .property {
      float: left;
      margin-left: 79px;
    }

Answer 1

我不太确定我是否理解你的问题，但我认为 CSS 3 Flexbox 可以帮助你实现我认为你需要的。

在这里看看它是否适合你：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

无需解释，请参阅下面的 CSS 和演示（响应式！）。

演示： http://jsfiddle.net/0m5p2818/

.properties {
    text-align: center;
    max-width: 720px; /* (200+(20x2))x3 */
    font-size: 0; /* fix for white space bug */
    margin-left: auto;
    margin-right: auto;
}

.property {
    display: inline-block;
    margin: 20px;
    font-size: 16px;
}

居中 3 列网格内部 100% 宽度 Div

Center 3 Column Grid Inside 100% Width Div

css

grid

layout