Css 向div添加文本会向下移动div

我有下面的代码，它并排显示7个div，类似于条形图

.wrapper{
宽度：100vw；
高度：50vw；
文本对齐：居中；
}
.酒吧{
宽度：50px；
高度：50px；
利润率：10px；
背景：红色；
显示：内联块；
}

---

只需设置条的

垂直对齐

，问题应得到解决。

说明：当垂直对齐设置为与基线相关的任何内容时，即：

baseline

、

sup

、

sub

、长度和百分比值以及默认值（基线）时，会发生此问题

解决此问题的值有：

中间

，

顶部

，

底部

，

文本顶部

，

文本底部

。你可以从中选择，但你很可能只需要前三个

.wrapper{
宽度：100vw；
高度：50vw；
文本对齐：居中；
}
.酒吧{
宽度：50px；
高度：50px；
利润率：10px；
背景：红色；
显示：内联块；
垂直对齐：底部对齐；
}

一些文本