Question

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

我还想提一下，我在容器中使用它。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

好吧，因为我需要50点声望评论（在我看来非常愚蠢的限制）..我会问为什么你有100％的宽度和高度，然后添加5px填充它？是不是喜欢100％+ 10PX？

.thumbnail img{
    width:100%;
    height:100%;
    border:5px solid white;
    border-radius:5px;

也许这就是我被教的方式......（我现在正在上课）...但那总是一件坏事。

将包含浮动项的内联块div居中

2 个答案: