Css 定心元件不'；t使用边距工作：0自动；

当边距为0自动时，元素不与中心对齐；应用 请参见此处的代码

我必须对齐页面中心的元素（.entry wrap应该对齐页面中心），其子元素（.entry）应该向左浮动

在某种程度上，我可以在小提琴中使用它，但我不希望第三行中的元素与中心对齐

<div class="entry-wrap">
    <div class="entry">
        <img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
    </div>
    <div class="entry">
        <img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
    </div>
    <div class="entry">
        <img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
    </div>
    <div class="entry">
        <img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
    </div>
    <div class="entry">
        <img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
    </div>
</div>

body {
    background: #f8f8f8;
}
.entry-wrap {
    width: 500px;
  height: auto;
    margin: 0 auto;
  background: #ccc;
  padding: 10px;
}
.entry {
    float: left;
    border: 1px solid #f1f1f1;
    margin: 2px;
}

身体{
背景：#f8f8；
}
.入口包装{
宽度：500px；
高度：自动；
保证金：0自动；
背景：#ccc；
填充：10px；
}
.进入{
浮动：左；
边框：1px实心#f1f1；
保证金：2倍；
}

---

这就是我想要实现的目标 1.）在

条目上使用
显示：内联块而不是
浮动：左

2.）在
上。条目换行
使用
文本对齐：居中

1.）在
条目上使用
显示：内联块而不是
浮动：左

2.）在
上。条目换行
使用
文本对齐：居中

首先，
entry wrap
中的所有元素都是浮动的，因此
entry wrap
正在折叠，要修复它，您可以向其添加
overflow:hidden
，或者使用解决方案

如果希望子元素居中，只需调整换行div的宽度即可：

body {
    background: #f8f8f8;
}

.entry-wrap {
    width: 620px;
    margin: 0 auto;
  padding: 15px;
  background: #ccc;
  overflow: hidden;
}
.entry {
    float: left;
    border: 1px solid #f1f1f1;
  margin: 2px;
}

fiddle:
首先，
entry wrap
中的所有元素都是浮动的，因此
entry wrap
正在塌陷，要修复它，您可以向它添加
overflow:hidden
，或者使用解决方案

如果希望子元素居中，只需调整换行div的宽度即可：

body {
    background: #f8f8f8;
}

.entry-wrap {
    width: 620px;
    margin: 0 auto;
  padding: 15px;
  background: #ccc;
  overflow: hidden;
}
.entry {
    float: left;
    border: 1px solid #f1f1f1;
  margin: 2px;
}

拨弄：
您带有
边距的块：0 auto
位于
的中心。问题出在子元素上，因为它们是浮动的，并且除非使用
display:inline block
而不是
float:left

这是小提琴
您带有
边距的块：0 auto
位于
的中心。问题出在子元素上，因为它们是浮动的，并且除非使用
display:inline block
而不是
float:left

这是小提琴
正文{
背景：#f8f8；
}
.入口包装{
宽度：618px；
高度：318px；
保证金：0自动；
背景：#ccc；
填充：10px；
}
.进入{
浮动：左；
边框：1px实心#f1f1；
保证金：2倍；
}


正文{
背景：#f8f8；
}
.入口包装{
宽度：618px；
高度：318px；
保证金：0自动；
背景：#ccc；
填充：10px；
}
.进入{
浮动：左；
边框：1px实心#f1f1；
保证金：2倍；
}

我无法添加更多的链接或图像，因此请将其添加到此处。这就是我想要实现的目标。抱歉，现在更新了链接。这是URL：如果我使用边距，元素（.entry）不会与中心对齐：0 auto；在某种程度上，我认为这是可行的，但与左边对齐的方向似乎非常接近。在第一小提琴中使用
display:inline block
，而不是
float:left
，这样做很有效。我无法添加更多链接或图像，因此将其添加到此处。这就是我想要实现的目标。抱歉，现在更新了链接。这是URL：如果我使用边距，元素（.entry）不会与中心对齐：0 auto；在某种程度上，我认为这是可行的，但与左边对齐的方向似乎非常接近。在第一小提琴中使用
display:inline block
，而不是
float:left
，它就起作用了。与他想要的效果不完全一样。entry div中的最后一个元素与中心对齐。不是我想要的。您不能将最后一个项目与上面左侧项目的左侧对齐，因为它们没有左对齐。您必须使用一个额外的包装器并将其居中。这与他想要的效果不完全相同。entry div中的最后一个元素与中心对齐。不是我想要的。您不能将最后一个项目与上面左侧项目的左侧对齐，因为它们没有左对齐。您必须使用一个附加的包装并将其居中。如果将宽度修改为700px in.entry wrap，则元素不会与中心对齐。是否需要具有灵活的宽度？是的。页面的宽度是可变的。图像也是可变的，还是具有固定的宽度？否。图像将具有固定的大小。200px。如果将宽度修改为700px in.入口包裹，则元素不会与中心对齐。是否需要具有灵活的宽度？是的。页面的宽度是可变的。图像也是可变的，还是具有固定的宽度？否。图像将具有固定的大小。200px。谢谢你的帮助。.entry中的最后一个元素没有向左浮动。要实现这一点，可以使用
text align last:left但它可能不是跨浏览器的。这是我们用纯cssOkay提供的最好的产品。谢谢你的帮助。应该有办法做到这一点。是的。它起作用了。但看起来您正在修改图像宽度（宽度：33.33%）。例如，看看dribbble.com，他们可以在不修改图像属性的情况下实现这一点。但问题是相同的解决方案在这里不起作用。我不想修改.entry属性，这将影响图像分辨率。谢谢您的帮助。.entry中的最后一个元素没有向左浮动。要实现这一点，可以使用
text align last:left但它可能不是跨浏览器的。这是我们用纯cssOkay提供的最好的产品。谢谢你的帮助。应该有办法做到这一点。是的。它起作用了。但看起来您正在修改图像宽度（宽度：33.33%）。例如，看看dribble.com，他们能够