Question

我正在使用bootstrap 2.3.2。我有一个里面有一些井的div。这是Preview

我的结构是

<body>
    <div class="page-header">
         <h1 id="title">Title</h1>
    </div>

    <div class="row">
        <div class="span3 my_span">
            <div class="well my_well">
                <h1>Text</h1>
                <hr>
                <p>More Text</p>
                <hr>
                <button class="btn btn-primary">Button</button>
            </div>
        </div>

        <div class="span3 my_span">
            <div class="well my_well">
                <h1>Textr</h1>
                <hr>
                <p>More Text</p>
                <hr>
                <button class="btn btn-primary">Button</button>
            </div>
        </div>

        <div class="span3 my_span">
            <div class="well my_well">
                <h1>Textr</h1>
                <hr>
                <p>More Text</p>
                <hr>
                <button class="btn btn-primary">Button</button>
            </div>
        </div>
    </div>
</body>

井是否在行div内，如何将所有井水平居中？

以下是带有代码的jsfiddle。

Answer 1

只需使用margin: 0 auto将div设置为居中。

 .my_span {
     width: 300px;
     margin: 0 auto;
 }

http://jsfiddle.net/BVmUL/367/

Answer 2

我认为这就是你所描述的：Fullscreen View

See jsfiddle

我修改了my_span：

.my_span {
    width: 300px;
    margin: 0 33px;
    float: none;
    display:inline-block;
}

并补充说：

.row {
    text-align: center;
    margin: 0;
}

编辑：我编辑了一些小提琴来修复边距。

Answer 3

你可以做到

.parent-of-centered-div {
    text-align: center;
}
.centered-div {
    display:inline-block;
    width: 20px; /* needs fixed width */   
}

如何将div中的元素居中

3 个答案: