Question

所有...

我想问一下非常基本的CSS。请参阅此处http://jsfiddle.net/fzJ8X/5/

HTML：

<div class="container">   
    <div class="item">
        <div class="overlay">
            <img src="http://placehold.it/200x200" />
        </div>
    </div>


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

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

CSS：

.container {
    width: 500px;
    margin: 0 auto;
    text-align: center;
    border: #000 1px solid;
}

.item {
    display: inline-block;
    border: #F00 5px solid;
    width: 200px;
    height: 200px;
    text-align: left;
}

.overlay {
    border: #00F 5px solid;
    width: auto;
    height: auto;   
}

.item img{
    max-width: 100%;
    height: auto;   
    display: block;
}

我在容器内有三个框，文字为text-align：center。现在所有的盒子都像我想要的那样居中，但是如何将所有盒子放在浮子里？如下截图：

Screenshot here

非常感谢：）

Answer 1

试试这个：

JS谜语：http://jsfiddle.net/xZst7/3/

CSS：

.container {
    width: 500px;
    margin: 0 auto;
    text-align: center;
    border: #000 1px solid;
    display: inline-block;
}

.item {
    display: inline-block;
    border: #F00 5px solid;
    width: 200px;
    height: 200px;
    text-align: left;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}

.overlay {
    border: #00F 5px solid;
    width: auto;
    height: auto;   
}

.item img{
    max-width: 100%;
    height: auto;   
    display: block;
}

HTML：

<div style="text-align: center;">
    <div class="container">   
        <div style="display: inline-block; width: 430px;">    
            <div class="item">
                <div class="overlay">
                    <img src="http://placehold.it/200x200" />
                </div>
            </div>


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

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

Answer 2

添加浮动：左;到代码

.item {
    display: inline-block;
    border: #F00 5px solid;
    width: 200px;
    height: 200px;
    text-align: left;
    float:left;
}

的jsfiddle：http://jsfiddle.net/fzJ8X/12/

Answer 3

没什么可做的。将 float：left; 添加到.item {}，如下所示。

.item {
    display: inline-block;
    border: #F00 5px solid;
    width: 200px;
    height: 200px;
    text-align: left;
    float:left;
}

检查小提琴 Fiddle

将div放在中心容器内

3 个答案: