css内联块元素，使用文本对齐时左浮动的最后一个子元素：在父div上居中

这里有问题的代码和演示版本。 如果你看到最后两个黑匣子在中间，有没有办法让它们显示在左边

mainparent
{
  width:500px;
  height:200px;
  text-align:center;
  background:#ccc;
}
.boxes
{
  width:50px;
  height:50px;
  display:inline-block;
  margin-left:5px;
  background:#000;
}

---

将您的CSS

#mainparent

文本对齐

更改为

左

既然您已经有了答案，另一种选择是使用CSS选择器

#mainparent
{
    width:500px;
    height:200px;
    text-align:center;
    background:#ccc;
}
.boxes
{
    width:50px;
    height:50px;
    display:inline-block;
    margin-left:5px;
    background:#000;
}

.boxes:nth-child(17)
{float:left; margin-left:21px;}

.boxes:nth-child(18)
{float:left; margin-left:9px;}

---

要使布局正确，您还需要做一些工作，它只在您有固定数量的框等时才起作用，但您可能会发现这种方法很有用（或者很可怕，知道不要再使用它！）

为什么不将它们放在左边？（并调整容器大小以适合它们…）

这样，您可以更好地控制边距，因为

字体大小

不会影响边距（也不会影响空格）

演示

---

更新

如果你想让元素在它们自己中间对齐，但在容器中对齐，你需要中间的另一个元素，一些JavaScript…

下面是一个jquery实现

html

<div id="mainparent">
    <div class="centerized">
        <div class="boxes"></div>
        <div class="boxes"></div>
        <div class="boxes"></div>
        ..
        ..
        <div class="boxes"></div>
        <div class="boxes"></div>
        <div class="boxes"></div>
    </div>
</div>

jquery

$(function(){
    // cache the repeatedly used elements
    // and fixed values
    var main = $('#mainparent'),
        centerized = main.find('.centerized'),
        itemWidth = main.find('.boxes').outerWidth(true);

    $(window).resize(function(){
        var fitItems = (main.width() / itemWidth) | 0;
        centerized.width(fitItems * itemWidth);
    }).trigger('resize');
});

---

演示在

添加以下内容：#mainparent{text align:left；}我认为OP不想破坏所有框的原始对齐方式，因为子元素不会在父div内居中！我想你必须接受@DaveRook的答案。这样，最后两个元素就会转到最左边，这不是我想要的！我需要它的反应。这样在不同的屏幕上就不好看了。可能有一些javascript解决方案！当scren变大或变小时，会发生什么情况：）因为我希望它具有响应性，并且在真实的网站中，父div是100%宽度。但是li元素现在没有居中hmmyou不能同时具有这两种条件（居中对齐和左对齐..）。您必须使用js来调整容器大小，以完全适合容器的内容并使其居中。@AXheladini，您需要包括jquery（如果您仍然有问题，请将链接发布到您的live站点，以便我可以查看）

#mainparent
{
    background:#ccc;
}
.centerized{
    overflow:hidden; // to grow according to the boxes
    margin:0 auto; // to be centered in container
}

$(function(){
    // cache the repeatedly used elements
    // and fixed values
    var main = $('#mainparent'),
        centerized = main.find('.centerized'),
        itemWidth = main.find('.boxes').outerWidth(true);

    $(window).resize(function(){
        var fitItems = (main.width() / itemWidth) | 0;
        centerized.width(fitItems * itemWidth);
    }).trigger('resize');
});