Html ListItem内部文本的CSS垂直对齐中心

我想将ListItem Home、About、FAQ和Kontakt的文本垂直居中。 所有4个列表项都应该稍微低一点

我用

nav{
字体系列：Helvetica、Arial、无衬线字体；
字号：18px；
/*线高：24px*/
文本对齐：居中；
边缘顶部：20px；
浮动：对；
}
导航ul{
显示：无；
边际：0px；
}
导航ul li：悬停>ul{
显示：块；
}
导航ul{
背景#FFC400；
背景：-webkit线性梯度（顶部，#e05f03 0%，#ca5603 100%）；
背景：-moz线性梯度（顶部，#e05f03 0%，#ca5603 100%）；
背景：-o-线性梯度（顶部，#e05f03 0%，#ca5603 100%）；
背景：-ms线性梯度（顶部，#e05f03 0%，#ca5603 100%）；
背景：线性梯度（顶部，#e05f03 0%，#ca5603 100%）；
盒子阴影：0px 0px 9px rgba（0,0,0,0.15）；
填充：0 10px；
边界半径：10px；
列表样式：无；
位置：相对位置；
显示：内联表；
}
海军ul：之后{
内容：“；
明确：两者皆有；
显示：块；
}
李国荣{
浮动：左；
宽度：150px；
高度：60px；
}
nav ul li:悬停{
背景：#4b545f；
背景：-moz线性梯度（顶部，#FFC400 0%，#FFA600 100%）；
背景：-o-线性梯度（顶部，#FFC400 0%，#FFA600 100%）；
背景：-ms线性梯度（顶部，#FFC400 0%，#FFA600 100%）；
背景：线性梯度（顶部，FFC400 0%，FFA600 100%）；
}
nav ul li:悬停a{
颜色：#fff；
文字装饰：无；
}
海军ulli a{
显示：块；
填充：10px 10px；
颜色：白色；
文字装饰：无；
}
导航ul{
/*背景#5f6975*/
边界半径：0px；
填充：0；
位置：绝对位置；
最高：100%；
}
李国宝{
浮动：无；
宽度：120px；
位置：相对位置；
}
海军ulli a{
填充：15px 20px；
颜色：#fff；
}
导航ulli a：悬停{
背景：#4b545f；
}

试试看

nav ul li {
   float: left;
   width: 150px;
   height: 60px;
   line-height:40px;
   vertical-align:middle;
}

试试看

nav ul li {
   float: left;
   width: 150px;
   height: 60px;
   line-height:40px;
   vertical-align:middle;
}

---

尝试利用flexbox：

li

项成为flex容器，并获得

display:flex

和

flex direction:column，包含的
a
元素获得
margin:auto
，沿柔性轴垂直居中：

nav ul li {
   float: left;
   width: 150px;
   height: 60px;
   display:flex;
   flex-direction: column;
}
nav ul li a {
  padding: 10px 10px;
  color: white;
  text-decoration: none;
  margin: auto;
}

尝试利用flexbox：


li
项成为flex容器，并获得
display:flex
和
flex direction:column，包含的
a
元素获得
margin:auto
，沿柔性轴垂直居中：

nav ul li {
   float: left;
   width: 150px;
   height: 60px;
   display:flex;
   flex-direction: column;
}
nav ul li a {
  padding: 10px 10px;
  color: white;
  text-decoration: none;
  margin: auto;
}

从
nav ul li
中删除了
float
和
height
样式，选择器
添加到目标直接子菜单项，而不影响子菜单项

nav > ul > li {
    width: 150px;
    vertical-align: middle;
    display: inline-block;
}


nav{
字体系列：Helvetica、Arial、无衬线字体；
字号：18px；
/*线高：24px*/
文本对齐：居中；
边缘顶部：20px；
浮动：对；
}
导航ul{
显示：无；
边际：0px；
}
导航ul li：悬停>ul{
显示：块；
}
导航ul{
背景#FFC400；
背景：-webkit线性梯度（顶部，#e05f03 0%，#ca5603 100%）；
背景：-moz线性梯度（顶部，#e05f03 0%，#ca5603 100%）；
背景：-o-线性梯度（顶部，#e05f03 0%，#ca5603 100%）；
背景：-ms线性梯度（顶部，#e05f03 0%，#ca5603 100%）；
背景：线性梯度（顶部，#e05f03 0%，#ca5603 100%）；
盒子阴影：0px 0px 9px rgba（0,0,0,0.15）；
填充：0 10px；
边界半径：10px；
列表样式：无；
位置：相对位置；
显示：内联表；
}
海军ul：之后{
内容：“；
明确：两者皆有；
显示：块；
}
李国荣{
宽度：150px；
垂直对齐：中间对齐；
显示：内联块；
}
nav ul li:悬停{
背景：#4b545f；
背景：-moz线性梯度（顶部，#FFC400 0%，#FFA600 100%）；
背景：-o-线性梯度（顶部，#FFC400 0%，#FFA600 100%）；
背景：-ms线性梯度（顶部，#FFC400 0%，#FFA600 100%）；
背景：线性梯度（顶部，FFC400 0%，FFA600 100%）；
}
nav ul li:悬停a{
颜色：#fff；
文字装饰：无；
}
海军ulli a{
显示：块；
填充：10px 10px；
颜色：白色；
文字装饰：无；
}
导航ul{
/*背景#5f6975*/
边界半径：0px；
填充：0；
位置：绝对位置；
最高：100%；
}
李国宝{
浮动：无；
宽度：120px；
位置：相对位置；
}
海军ulli a{
填充：15px 20px；
颜色：#fff；
}
导航ulli a：悬停{
背景：#4b545f；
}

































从
nav ul li
中删除
float
和
height
样式，选择器
添加到目标直接子菜单项，而不影响子菜单项

nav > ul > li {
    width: 150px;
    vertical-align: middle;
    display: inline-block;
}


nav{
字体系列：Helvetica、Arial、无衬线字体；
字号：18px；
/*线高：24px*/
文本对齐：居中；
边缘顶部：20px；
浮动：对；
}
导航ul{
显示：无；
边际：0px；
}
导航ul li：悬停>ul{
显示：块；
}
导航ul{
背景#FFC400；
背景：-webkit线性梯度（顶部，#e05f03 0%，#ca5603 100%）；
背景：-moz线性梯度（顶部，#e05f03 0%，#ca5603 100%）；
背景：-o-线性梯度（顶部，#e05f03 0%，#ca5603 100%）；
背景：-ms线性梯度（顶部，#e05f03 0%，#ca5603 100%）；
背景：线性梯度（顶部，#e05f03 0%，#ca5603 100%）；
盒子阴影：0px 0px 9px rgba（0,0,0,0.15）；
填充：0 1