html - CSS - 为什么这个 div 不占用 float 子项的宽度？

Question

我有一个带有 float 图像的网格。 我想让图像在页面中居中，所以我添加了一个 inner div，在一个完美的世界中，它会占据内部 float 图像的宽度，并让那个人在页面中居中。

但这是 css!

不幸的是，出于某种原因，div 继承了父级的整个宽度，因此无法将元素居中。

这里是选择了内部 div 的输出:

这是我正在使用的 CSS:

.image-grid{

    padding: 20px;
}


.image-grid__inner{

    overflow: hidden;

}
.image-grid__image{
    text-align: center;  
    display: block;

    position: relative;

    -webkit-backface-visibility: hidden;

    width:  180px;
    height: 120px;

    float: left;
    margin: 10px;

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    transition: padding 0.3s ease, transform 0.2s ease-out, box-shadow 0.5s;
}


.image-grid__image img{
    display: inline-block;

    width:  180px;
    height: 120px;

    transition: width 0.3s ease, height 0.3s ease;
}

Milion 在此感谢您的帮助。

Answer 1

如果空间不足以容纳缩略图，它会折叠，如果您希望将基于行的缩略图居中，同时在调整容器大小时保持其居中，我建议您考虑这个简单的 flexbox 示例:

• 从 .image-grid__image 中删除/注释 float:left;
• 添加 display: flex; flex-flow: row wrap; justify-content: center; 到 .image-grid__inner

External Fiddle to test resizing

和下面的片段:

.image-grid {
  padding: 20px;
  /* just for reference */
  border: 1px solid lightgray;
}

.image-grid__inner {
  overflow: hidden;
  /* new */
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.image-grid__image {
  text-align: center;
  display: block;
  position: relative;
  -webkit-backface-visibility: hidden;
  width: 180px;
  height: 120px;
  /*float: left;*/
  margin: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: padding 0.3s ease, transform 0.2s ease-out, box-shadow 0.5s;
}

.image-grid__image img {
  display: inline-block;
  width: 180px;
  height: 120px;
  transition: width 0.3s ease, height 0.3s ease;
}

<div class="image-grid">
  <div class="image-grid__inner">
    <div class="image-grid__image"></div>
    <div class="image-grid__image"></div>
    <div class="image-grid__image"></div>
    <div class="image-grid__image"></div>
    <div class="image-grid__image"></div>
  </div>
</div>