Html Flexbox将项目垂直对齐到导航栏的中心

我正在尝试制作一个导航栏，并希望它的内容在中心垂直对齐。我正在使用

flex

执行此操作，但无法使项目在中心对齐

#导航容器{
宽度：100%；
高度：50px；
溢出：隐藏；
背景：#3498db；
排名：0；
左：0；
位置：固定；
z指数：999；
}
#导航集装箱{
最大宽度：800px；
位置：相对位置；
填充：0 30px；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
对齐项目：居中；
}
.顶部导航标志{
最大高度：35px；
浮动：左；
}
导航菜单{
利润率：0.50px；
填充：0；
浮动：左；
}
ul.navli{
右边填充：25px；
显示：内联；
}

家
关于
接触

在这种情况下，只需在

#nav container.container

上设置高度即可

#导航容器{
宽度：100%；
高度：50px；
溢出：隐藏；
背景：#3498db；
排名：0；
左：0；
位置：固定；
z指数：999；
}
#导航集装箱{
最大宽度：800px；
位置：相对位置；
填充：0 30px；
高度：50px；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
对齐项目：居中；
}
.顶部导航标志{
最大高度：35px；
浮动：左；
}
导航菜单{
利润率：0.50px；
填充：0；
浮动：左；
}
ul.navli{
右边填充：25px；
显示：内联；
}

主页
关于
联系人

将此添加到

#nav container

（除当前设置外）：

这将

.container

置于

#nav container

#导航容器{
宽度：100%；
高度：50px；
溢出：隐藏；
背景：#3498db；
排名：0；
左：0；
位置：固定；
z指数：999；
显示器：flex；
对齐项目：居中；
}
#导航集装箱{
最大宽度：800px；
位置：相对位置；
填充：0 30px；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
对齐项目：居中；
}
.顶部导航标志{
最大高度：35px；
浮动：左；
}
导航菜单{
利润率：0.50px；
填充：0；
浮动：左；
}
ul.navli{
右边填充：25px；
显示：内联；
}

主页
关于
联系人

使集装箱内#导航集装箱充满其高度

#nav-container .container {
    height: 100%;
}

---

jsiddle demo:

默认情况下，flex容器

#nav container.container

的

高度是
auto
，换句话说，就是包含内容的高度，因此
对齐项目
在视觉上不起作用

您可以将其设置为
#nav container.container{height:100%；}
或
height:inherit，因为父级导航容器具有固定高度


#导航容器{
宽度：100%；
高度：50px；
溢出：隐藏；
背景：#3498db；
排名：0；
左：0；
位置：固定；
z指数：999；
}
#导航集装箱{
最大宽度：800px；
位置：相对位置；
填充：0 30px；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
对齐项目：居中；
高度：100%；/*已添加*/
}
.顶部导航标志{
最大高度：35px；
浮动：左；
}
导航菜单{
利润率：0.50px；
填充：0；
浮动：左；
}
ul.navli{
右边填充：25px；
显示：内联；
}


家
关于
接触

我认为您需要添加的唯一道具是
显示：flex至
#导航集装箱

事实上，这是我对您的代码所做的唯一更改


#导航容器{
宽度：100%；
高度：50px；
溢出：隐藏；
背景：#3498db；
排名：0；
左：0；
位置：固定；
z指数：999；
显示器：flex；
}
#导航集装箱{
最大宽度：800px；
位置：相对位置；
填充：0 30px；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
对齐项目：居中；
}
.顶部导航标志{
最大高度：35px；
浮动：左；
}
导航菜单{
利润率：0.50px；
填充：0；
浮动：左；
}
ul.navli{
右边填充：25px；
显示：内联；
}

主页
关于
联系人

元素
#导航容器
也需要是一个灵活的容器

我建议将您的图像包装在另一个元素中，例如
div
，以防止它成为弹性项目时出现任何不希望出现的行为

您还可以通过删除所有不必要的浮动来进行一些清理，并将
ul
元素设置为flex容器


#导航容器{
宽度：100%；
高度：50px；
溢出：隐藏；
背景：#3498db；
排名：0；
左：0；
位置：固定；
z指数：999；
display:flex；/*使父容器也成为flex容器*/
}
#导航集装箱{
最大宽度：800px；
位置：相对位置；
填充：0 30px；
显示器：flex；
柔性包装：包装；
对齐项目：居中；
}
.顶部导航标志{
最大高度：35px；
垂直对齐：中间；/*使用此选项而不是浮动：左*/
}
导航菜单{
利润率：0.50px；
填充：0；
/*删除不必要的浮动：左*/
列表样式类型：无；/*删除ul标记*/
显示：flex；/*使无序列表成为flex容器*/
对齐项目：居中；/*垂直对齐列表项目*/
}
ul.navli{
右边填充：25px；
/*已删除flex项目不必要的显示属性*/
}


家
关于
接触


#nav-container .container {
    height: 100%;
}