中心3列网格内部100％宽度Div

Question

我有一个3列网格，它位于100％容器div中。但截至目前，它只是一直被拉到页面的左侧。我希望三列div成为容器内的中心。以下是我正在尝试编码的设计的屏幕截图：为了修复每个网格框之间的边距问题，我使用了found here技术（向下滚动到最后一部分“滚动自己...“）

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和演示（响应！）。

DEMO： 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;
}

Answer 2

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

在这里查看一下，看看它是否适合您：https://css-tricks.com/snippets/css/a-guide-to-flexbox/