"在塊中顯示時，如何使用 flex 在 Jumbotron 中垂直居中項目？"
[英]How do you vertically center items in Jumbotron using flex while displaying in block?
問題描述
我試過這個將所有項目垂直居中在一個 Jumbotron 中，
display: flex;
justify-content: center;
align-items: center;
2 個解決方案
解決方案1
0 已采納 2017-11-18 09:12:18
由於block元素垂直堆疊，將 flex 方向更改為column ，flex 項目也將如此。
display: flex;
flex-direction: column; /* added */
justify-content: center;
align-items: center;
解決方案2
0 2022-01-29 13:38:01
除了上面的答案，您還可以通過將 text-align 設置為居中來居中文本元素，例如h1<\/code> 、 p<\/code>或a<\/code> 。
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; /* aligning items */
text-align: center; /* aligning text */
當父容器具有基線對齊項時，如何使用 flex 垂直居中圖像？
[英]How do I vertically center an image with flex when the parent container has align items of baseline?
你如何垂直居中容器並使用 CSS 刪除滾動條（同時使用 min-height 100vh）
[英]how do you center container vertically and remove the scrollbar using CSS (while using min-height 100vh)
使用flex align-items center將div中的文本垂直居中
[英]Using flex align-items center to vertically center text inside div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.