[英]How do you vertically center items in Jumbotron using flex while displaying in block?
I tried this to vertically center all items in a Jumbotron,我试过这个将所有项目垂直居中在一个 Jumbotron 中,
display: flex;
justify-content: center;
align-items: center;
Since block
element stacks vertically, change the flex direction to column , and so will the flex items.由于
block
元素垂直堆叠,将 flex 方向更改为column ,flex 项目也将如此。
display: flex;
flex-direction: column; /* added */
justify-content: center;
align-items: center;
Adding to above answer, you can also center text elements such as h1<\/code> ,
p<\/code> or
a<\/code> by setting text-align to center.
除了上面的答案,您还可以通过将 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 */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.