Html 没有文本的Div与有文本的Div对齐方式不同

以下是其中一项：

.filterDivActual，#filterSeparator{
显示：内联块；
}
.filterDivActual{
边框：2倍纯色灰色；
宽度：15%；
高度：50px；
线高：50px；
颜色：灰色；
位置：相对位置；
}
#过滤分离器{
高度：50px；
宽度：5px；
背景色：黑色；
}

顶部
新的
今天
昨天
没有一个

对于内联/内联块元素，使用

垂直对齐

属性：

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

---

我不知道它为什么会这样做，但您可以使用float:left；代替显示：内联块

#过滤器分离器：之前{
内容：“.”；
可见性：隐藏；
}

.filterDivActual，#filterSeparator{
显示：内联块；
}
.filterDivActual{
边框：2倍纯色灰色；
宽度：15%；
高度：50px；
颜色：灰色；
位置：相对位置；
}
#过滤分离器{
高度：50px；
宽度：5px；
背景色：黑色；
}
#过滤器分离器：之前{
内容：“.”；
可见性：隐藏；
}

顶部
新的
今天
昨天
没有一个

将内容放入空的

将修复它

<div id='filterSeperator'>&nbsp;</div>

…如果要用于父级：

文本对齐：居中

（将内部

内联/内联块

子块居中对齐）您将遇到麻烦。请注意，您的解决方案还需要

行高：50px

（与

高度

）相同，这不包括在OP的代码中，但在他的小提琴中。