我正在努力将容器中的一些内容水平居中:
https://jsfiddle.net/y56t31q9/6/
.container {
display: flex;
flex-direction: column;
width: 600px;
background-color: blue;
justify-content: center;
/* Not centering content horizontally? */
}
.item {
max-width: 500px;
height: 100px;
background-color: yellow;
border: 2px solid red;
}
<div class="container">
<div class="item"></div>
<section class="item"></section>
<section class="item"></section>
<footer class="item"></footer>
</div>
我原以为 justify-content 会成功，但无济于事。
任何帮助将不胜感激
谢谢!
属性 justify-content:center 沿 flex 方向对齐 flex-items - 使用 align-items:center - 参见下面的演示:
.container {
display: flex;
flex-direction: column;
width: 600px;
background-color: blue;
justify-content: center;
align-items:center;/*NEW*/
}
.item {
max-width: 500px;
width: 250px;/*NEW*/
height: 100px;
background-color: yellow;
border: 2px solid red;
}
<div class="container">
<div class="item"></div>
<section class="item"></section>
<section class="item"></section>
<footer class="item"></footer>
</div>
引用:Flexbox W3C spec
下面是当 flex-direction 为 row 时应用的图像:
一个。主轴对齐:对齐内容
横轴对齐:对齐项
当 flex-direction 为 row 时，主轴是水平的，但当它是 column 时，则相反.