Html 显示：内联块和垂直居中

我有三个div，我希望它们彼此并排并居中显示。它先是图像、1px分隔符，然后是文本。我希望它们与旁边的那些相比垂直居中

HTML

问题是，当文本移动到多行时，文本的居中不再起作用

请尝试：

.sub-logo-wrap > div { 
  display: inline-block; 
  vertical-align: top;
}
.sub-logo-text {
  line-height: 30px; /* Image height */ 
  width: 150px; 
}

您还可以使用：

---

这很容易做到

.sub-logo-wrap > div {
    display: inline-block;
    vertical-align: middle;
}

如果您需要额外的准确性，也可以添加此项

.sub-logo img {
    display: block;
}

或

---

很抱歉，我刚刚编辑完我的问题（结尾未应用），当文本转到多行时，问题就出现了。我不能完全控制这一点，所以线的高度不会像你描述的那样工作

.sub-logo-wrap {
 display: flex;
 flex-direction: row;
 align-items: center;
 align-content: center;
}
.sub-logo-wrap > div {
 /* No need to add display: inline-block */
}

.sub-logo-wrap > div {
    display: inline-block;
    vertical-align: middle;
}

.sub-logo img {
    display: block;
}

.sub-logo img {
    vertical-align: top;
}