html - 使用 HTML div 中的 Bootstrap 水平和垂直居中文本

Question

您好，我正在尝试为 freecodecamp 完成此页面，但我被困在一些细节上。

Here's my code

我试图让“小马丁路德金民权英雄和偶像”标题在 div 中垂直居中。我还尝试将 h3 标签“马丁·路德·金生平时间轴”水平居中。

我试过 text-align:center;和文本中心 Bootstrap 类。似乎都不起作用。我还尝试添加 !important 以查看 Bootstrap 类是否以某种方式覆盖了它。有什么想法吗？

HTML:

<h1 class="display-2 text-center">Martin Luther King Jr</h1>
    <h3 class="text-center text-muted font-italic">civil rights hero and icon</h3>

Answer 1

由于您使用的是 flex box - 您可能希望利用 align-items 和 justify-content 属性。

这是稍微更新的标记和 CSS

HTML

<div class="col centered-content" style="border-style:solid;border-color:grey;border-radius:20px;background-color:white!important;background-color: white;">
    <div class="centered-content__inner">
        <h1 class="display-2 text-center" style="">Martin Luther King Jr</h1>
        <h3 class="text-center text-muted font-italic">civil rights hero and icon</h3>
    </div>
</div>

CSS:

.centered-content {
    display: flex;
    justify-content: center;
    align-items: center;
}
.centered-content__inner {
    background: none;
}

更多关于使用 flex box 内容居中的信息 here

希望这有帮助:)