display: flex取消文字垂直居中

Question

如何取消文字垂直居中；

我本想用个display: flex 和overflow-y: scroll 实现横行滑动。

可是

文字垂直居中。怎么解决，网上找了好多都无法解决。

.component-nav{

display: flex;
height: 100px;
width: 750px;   
overflow-y: scroll;
flex-direction:row;

}

.component-nav-list{

display: block;
font-size: 30px;
width: 80px;
height: 30px;
margin: 20px 30px 20px 30px;

}

Answer 1

这是文字容器太小 被挤下去的 宽度给多点就可以了

Answer 2

看不到你CSS
但我估计，你这个不是文字垂直居中，而是包含文字的块太小了，第二个字是被挤下去的吧

不知道你到底要什么效果，如果不要换行，可以加个 word-break: keep-all;

.component-nav-list{

display: block;
font-size: 30px;
  word-break: keep-all;
width: 200px;
height: 30px;
margin: 20px 30px 20px 30px;
}