html - 与带有文本的 Div 相比，没有文本的 Div 的对齐方式不同

Question

这是一个fiddle以下:

.filterDivActual, #filterSeparator {
  display: inline-block;
}
.filterDivActual {
  border: 2px solid grey;
  width: 15%;
  height: 50px;
  line-height: 50px;
  color: grey;
  position: relative;
}
#filterSeparator {
  height: 50px;
  width: 5px; 
  background-color: black; 
}

<div id='filterDiv'>
  <div class='filterDivActual'>Top</div>
  <div class='filterDivActual'>New</div> 
  <div id='filterSeparator'></div>
  <div class='filterDivActual'>Today</div>
  <div class='filterDivActual'>Yesterday</div>
  <div class='filterDivActual'>None</div>
</div>

我想要的是让 #filterSeparator 与其他 div 对齐。

出于某种原因，所有其他 div 都在 #filterSeparator 下方。

如果我将文本放在 #filterSeparator 中，那么它就可以工作。

有没有办法让我在不在 #filterSeparator 中放置任何文本的情况下让它工作？

Answer 1

fiddle

对于 inline/inline-block 元素，使用 vertical-align 属性:

.filterDivActual, #filterSeperator {
    display: inline-block;
    vertical-align: middle ; /* or some other value: */
}

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align