Css 我不明白为什么我的文本框没有与父div垂直对齐

我正在尝试做类似的事情：

其中“项目标题”位于[图像]总高度的中心

---

我正在使用flex在项目描述上方设置一个

div

：

.headline {
    display: flex;
    align-items: center;
    justify-content: center;
}

---

标题在这里

这里有一些盒子的内容

---

但是，我不明白为什么

项目描述

div没有成功地对齐项目

---

请参见JSFIDLE上的。

将您的flex box定义移动到父级

.row

，它将起作用（父级

.row

和

.headline

）

比如：

.project-wrap > article > .row {
    display: flex;
    align-items: center;
    justify-content: center;
}
.project-wrap > article:nth-of-type(even) > .row {
    flex-direction: row-reverse;
}

---

我注意到一个问题。虽然你的建议确实有效。添加：

display:flex

到父级

。行

导致它忽略

浮动

。因此所有项目都显示在左侧。@davv:Add

flex direction:row reverse

到偶数行（请参见我编辑的答案）。由于某种原因，您的

nth类型（偶数）

不起作用。

是一种说法吗？仅当.project wrap后面紧跟着article后面紧跟着.row时才适用？@davv:是的，

完全按照您编写的内容选择这些元素。谢谢。这已经解决了它。我很惭愧我没发现。我需要休息一下。你介意将我链接到一篇好文章，解释CSS中的

？

.project-wrap > article > .row {
    display: flex;
    align-items: center;
    justify-content: center;
}
.project-wrap > article:nth-of-type(even) > .row {
    flex-direction: row-reverse;
}