html - 将包含 float 元素的内联块div居中

抱歉，如果我发布了与其他问题类似的内容，但实际上我需要解决方案。好吧，我想做的是创建图像库。所以我有200px的图像，每个图像都是块。因此，为了根据屏幕尺寸居中放置这些图像，我尝试将这些图像包装在其他div（即内嵌块）中。但是它还没有准备好进入中心。

我还想提到我正在容器中使用它。

.gallery{
    display:inline-block; /* I am not sure what to do here */
}
.thumbnail{
    width:200px;
    height:200px;
    border:1px solid #aaa;
    border-radius:5px;
    display:block;
}
.thumbnail img{
    width:100%;
    height:100%;
    border:5px solid white;
    border-radius:5px;
}
.gallery-item{
    float:left;
    margin:10px;
}
.clearfix:after{
    clear:both;
}
.clearfix:after, .clearfix:before{
    display:table;
    content: " ";
}
.clearfix:after{
    content:" ";
    height:10px;
}

<div class="gallery">
    <div class="thumbnail gallery-item">
        <img src="images/slide1.jpg" />
    </div>
    <div class="thumbnail gallery-item">
        <img src="images/slide1.jpg" />
    </div>
    <div class="thumbnail gallary-item">
        <img src="images/slide1.jpg" />
    </div>
    <div class="thumbnail gallery-item">
        <img src="images/slide1.jpg" />
    </div>
    <span class="clearfix"></span>
</div>

最佳答案

如果希望元素居中，请不要使用float属性。

.gallery {
    font-size: 0; /*fix for white space */
    text-align: center;
}
.thumbnail {
    display: inline-block;
    margin: 10px;
    width: 200px;
    height: 200px;
    border: 1px solid #aaa;
    border-radius: 5px;
    box-sizing: border-box;
}
.thumbnail img {
    max-width: 100%;
    height: auto;
    border: 5px solid white;
    border-radius: 5px;
    box-sizing: border-box;
}

<div class="gallery">
    <div class="thumbnail">
        <img src="http://placehold.it/200x200" />
    </div>
    <div class="thumbnail">
        <img src="http://placehold.it/200x200" />
    </div>
    <div class="thumbnail">
        <img src="http://placehold.it/200x200" />
    </div>
    <div class="thumbnail">
        <img src="http://placehold.it/200x200" />
    </div>
</div>

JSFiddle：http://jsfiddle.net/ntbh1rmk/