"在块中显示时，如何使用 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.