html - 当绝对子代时，引导容器不会居中

我有一个position: absolute;的父div，这意味着我的子div引导class="container"不在页面中央浮动，而是位于左侧。我希望容器类按其应有的方式工作，在这种情况下，请集中我的内容。

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

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

最佳答案

将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

关于html - 当绝对子代时，引导容器不会居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35302138/