Question

我试图将一个嵌套的div放在引导程序中，它也在一个包装器中。

基本上它贴在我的包装纸的左边而不是相对居中。

HTML：

<div class="wrapper center-block">  
<P>
The panels below need to be centered so they dont stay left.
They aren't supposed to line up with this paragraph, but be offset so that it looks "fluid"<br />
i.e. stop here<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;v
</P>
<div class="row">
    <div class="col-lg-8 center-block">
        <!-- WHY WONT THIS NESTED DIV CENTER!?-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><strong>Test panel </strong></h3>
            </div>
            <div class="panel-body">
                test
            </div>
        </div>
    </div>
</div>
<div class="panel-footer col-sm-10 center-block">
    <p><small>test footer</small>
    </p>
</div>
</div>
<!-- /container -->

CSS：

.wrapper{
    max-width:1200px;
    float: none;
    margin: 0 auto;
}

我正在考虑制作另一个包装器，但这似乎过分了。还有另外一种方法吗？

Answer 1

使用Css，您可以使用span来放置文本，它会缩小它。然后，您可以将其与margin-left:auto; margin-right:auto;或div（需要width）对齐并进行相同操作。如果是文字，那么text-align:center;

希望有所帮助！

Answer 2

根据曼努埃尔的建议，我最终做到了这一点：

<强>更改：

<div class="col-lg-8 center-block">

要：

<div class="wrapper2 center-block">

添加了CSS ：

.wrapper2{ max-width:600px; float: none; margin: 0 auto; }

<强>替代地：

<div class="center-block" style="max-width:600px;">

工作原理相同。

嵌套div居中的Bootstrap问题

2 个答案: