导航栏该怎么写才比较简单？

怎么划分几个导航的位置如图，让其上下居中，我的太靠下了，还有每个导航中间有一竖，怎么写才简单点

flex布局

<style>
ul{
  display:flex;
  height:60px;
align-items: center;//上下居中
}
</style>
<ul>
  <li></li>
</ul>

加个行高就可以的，line-height:像素大小和你的高一样就可

加行高 或者 一楼的 flex 也是垂直居中

1.flex布局；

        display: flex;
        justify-content: space-between; //水平自适应（间隔）
        align-items: center;  //垂直居中

2. block，普通布局

   line-height:100px;  //将行高设置成父div的高度
   

flex布局简单