內容未在引導網格中居中

Question

 .course-card{ background: white; border-radius: 0.25rem; padding: 1rem 1rem 1rem 1rem; text-align: center; }

 <div class="row d-flex align-items-center course-card"> <div class="col-md-6 course-progress"> <p>test</p> </div> <div class="col-md-6 course-info"> <div id="div2-1 course-name"> <p>test</p> </div> <div id="div2-2 course-button"> <p>test</p> </div> </div> </div>

我的結果

我想要的是

我試圖在引導程序中將我的內容居中，但即使在添加d-flex align-items-center之后，內容仍然關閉，正如您在圖片上看到的那樣，它甚至不在中間，但下部有更多空間。

Answer 1

添加d-flex align-items-center作為 class 本身不會做任何事情。 由於我們看不到 CSS 的 rest，因此不清楚該代碼將做什么。

但是，您可以嘗試以下方法：

 div { display: flex; outline: 1px dashed blue; justify-content: space-evenly; flex-grow: 1; text-align: center; } p { align-self: center; }

 <div style="width: 300px; height: 150px;"> <div style="flex-direction: row;"> <div> <p>test</p> </div> <div style="flex-direction: column"> <div> <p>test</p> </div> <div> <p>test</p> </div> </div> </div>

您可以使用每個 div 周圍的藍色虛線來幫助參考元素相對於彼此的位置。

您的 div 已正確對齊，但p標簽中的文本垂直間距不正確。 在我的示例中， p元素都與align-self: center垂直對齊，這應該可以解決您注意到的問題。