Question

所以我试图让这些4个div并排，但使用margin：auto;

这是WITHOUT-block-block;

HTML：

    <section class="stats">
        <div class="box1">
            <h5>Online Users</h5>
        </div>
        <div class="box1">
            <h5>Online Users</h5>
        </div>
        <div class="box1">
            <h5>Online Users</h5>
        </div>
        <div class="box1">
            <h5>Online Users</h5>
        </div>
    </section>

CSS：

.stats {
    padding: 15px;
}

.box1 {
    margin: auto;
    width: 20%;
    background-color: #b0e0e6;
}

这里是WITH inline-block; （由于某种原因不以保证金为中心）

JSFiddle

HTML：

    <section class="stats">
        <div class="box1">
            <h5>Online Users</h5>
        </div>
        <div class="box1">
            <h5>Online Users</h5>
        </div>
        <div class="box1">
            <h5>Online Users</h5>
        </div>
        <div class="box1">
            <h5>Online Users</h5>
        </div>
    </section>

CSS：

    .stats {
    padding: 15px;
}

.box1 {
    margin: auto;
    width: 10%;
    background-color: #b0e0e6;
    display: inline-block;
}

感谢您的帮助！

Answer 1

您想使用text-align: center;，因此修改后的css将如下所示：

.stats {
    padding: 15px;
    text-align: center;
}

.box1 {
    margin: auto;
    width: 10%;
    background-color: #b0e0e6;
    display: inline-block;
    text-align: center;
}

请参阅小提琴：http://jsfiddle.net/ug2YZ/3/

希望这有帮助。

Answer 2

将text-align:center;添加到.box1

即

.box1 {
margin: auto;
width: 20%;
background-color: #b0e0e6;
text-align:center;

}

Answer 3

要使文字居中，您只需要使用样式＆＃34; text-align：center＆＃34;对于方框1类。见下面的代码

.box1 {
    margin: auto;
    width: 20%;
    background-color: #b0e0e6;
    text-align:center;
}

如何集中内联块的div

3 个答案: