html - 当绝对的 child 时 Bootstrap 容器不居中

Question

我有一个带有 position: absolute; 的父 div，这意味着我的子 div Bootstrap class="container" 不会 float 在页面中央相反，它只是位于左侧。我希望容器类按其应有的方式运行，在本例中将我的内容居中。

<section id="portfolio">
    <div class="container">
        Content
    </div>
</section>

/*display content below the fold*/
#portfolio{
    position: absolute;
    top:120%;
}

Answer 1

将 width:100% 添加到您的#portfolio CSS 选择器:

/*display content below the fold*/
#portfolio{
    width: 100%;
    position: absolute;
    top:120%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<section id="portfolio">
    <div class="container">
        Content
    </div>
</section>

上面的代码片段将使容器在#portfolio 中居中，而不使文本居中。默认情况下，Bootstrap 3 容器是固定宽度的，并使用 margin-left: auto; 和 margin-right: auto 在它们的父容器中居中。如果您还想将容器中的文本居中，您可以添加 text-align: center