使用HTML div中的引導程序將文本水平和垂直居中

Question

嗨，我正在嘗試完成freecodecamp的本頁，但我停留在一些細節上。

這是我的代碼

我正在嘗試使“馬丁·路德·金·小民權英雄和圖標”標題在div中垂直居中。 我還嘗試使用h3標簽“小馬丁·路德·金的生平”的時間軸水平居中。

我試過了text-align：center; 和文本中心引導程序類。 似乎都不起作用。 我也嘗試添加！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

使具有類row的div顯示為表格，將兩個孩子顯示為表格單元格。 然后您可以在中間應用垂直對齊

.row{
  display:table
}
.row .col,.row .col-5{
  display:table-cell;
}
.centered div:first-child{
  width: 100%;
  text-align:center;
}

點擊此處進行演示

Answer 2

由於您使用的是彈性框-您可能需要利用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進行內容居中的內容

希望這可以幫助 ：）