Question

我尝试阅读其他答案，但就我所能找到的具体情况而言，没有答案。

我想在自举容器内制作半透明的背景，以提高文本的可读性。我能够实现的是：

这看起来不太好：我希望文本和按钮在我的背景 div中垂直和水平对齐。

从我在这里发现的其他问题中，我尝试将类align-items-center justify-content添加到我的内部div中，但结果并没有好得多：

我们可以看到，“按钮”按钮仍触及背景的底部，内容本身仍未在背景内垂直对齐。

我该如何解决？

这是我的代码：

<div class="my-background">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-12">
                <div id="content align-items-center justify-content">
                    <h1>Hello World</h1>
                    <h3>Welcome to my fancy Hello World page!</h3>
                    <hr>
                    <button class="btn btn-default btn-lg">Button</button>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

html {
    height: 100%;
}
.my-background {
    text-align: center;
    height: 100%;
    margin-top: 100px;
    background-color: rgba(0, 0, 0, 0.4);
}

#content {
    margin: auto;
    text-align: center;
    padding-top: 25%;
}

Answer 1

对于这样的事情，我建议使用flex。

可以找到完整的指南here。

但是，为了使所有内容居中对齐，您可以执行以下操作，实际上是使用flex。

html {
    height: 100%;
}
.my-background {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 700px;
    margin-top: 100px;
    background-color: rgba(0, 0, 0, 0.4);
}

hr {
  width: 100%;
}

#content {
    margin: auto;
    text-align: center;
    padding-top: 25%;
}

<div class="my-background">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-12">
                <div id="content align-items-center justify-content">
                    <h1>Hello World</h1>
                    <h3>Welcome to my fancy Hello World page!</h3>
                    <hr>
                    <button class="btn btn-default btn-lg">Button</button>
                </div>
            </div>
        </div>
    </div>
</div>

请注意，我更改了背景的高度，以确保您可以看到结果。

Bootstrap 4：将内容垂直放置在自定义div内的容器内

1 个答案: