Html 对中直列块

我们有一个容器，红色边框，包含一堆小的内联块元素，绿色边框。这看起来或多或少是我想要的

HTML:

    <div class="featuredBoxContainer">
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div> 
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>
        <div class="featuredBox"></div>             
    </div>

当你缩小页面时，我的问题变得更加明显

这些元素都向左浮动，而我更喜欢它们居中

---

这个问题很直截了当。如何在容器中居中放置这些内容？

将以下内容添加到.featureBoxContainer中如何

text-align: center;

我还建议您看看CSS3 flex

.featuredBoxContainer{
最大宽度：1780px；
最大高度：468px；
边框：1px纯红；
溢出：隐藏；
文本对齐：居中；
}
.功能盒{
显示：内联块；
宽度：200px；
高度：130像素；
利润率：10px；
边框：1px纯绿色；
}

---

如果您只支持现代浏览器，

flexbox

是一个选项。在容器上，您需要一个

display:flex、一个
对齐内容：中心
和一个
柔性包装：包装
。为了获得更广泛的支持，需要供应商前缀


.featuredBoxContainer{
最大宽度：1780px；
最大高度：468px；
边框：1px纯红；
保证金：0自动；
溢出：隐藏；
显示器：flex；
证明内容：中心；
柔性包装：包装；
}
.功能盒{
显示：内联块；
宽度：200px；
高度：130像素；
利润率：10px；
边框：1px纯绿色；
}

媒体查询。以下是一些背景和潜在的解决方案（答案可能看起来不相关，直到你做了一半）：起初我确实想到了媒体查询，但后来我还是希望有一种更直观/更简单的方法来做。谢谢你的提琴。我试过添加文本对齐：居中；一开始问题是，结果是这样的。左边总是有更多的空格。可能有一种方法可以解决这个问题。这很奇怪，因为这种行为不会发生在代码片段中。还有其他的HTML/CSS吗？@FelixMaxime这是因为你在第一个元素的左边有一个边距。弄明白它为什么这么做了！当我在玩它的时候，我试着把容器/元素转换成ul/列表项。ULs在左侧有一个自然边界。现在一切都好了。谢谢
text-align: center;