Html 将导航栏内的所有内容垂直对齐

我试图将所有内容垂直居中于导航栏容器内，称为（标题区域），这样所有内容都是内联的。目前，img、左导航和右导航在容器中的对齐方式都不同

另一种解决方案也是受欢迎的

/*----全局样式-----*/
html{
框大小：边框框；
}
html，正文{
保证金：0；
填充：0；
边界：0；
}
身体{
字体系列：“HKGroteskRegular”；
}
*，*：之前，*：之后{
框大小：继承；
}
/*--------------标题导航--------------*/
.标题区{
位置：相对位置；
排名：0；
左：0；
宽度：100%；
z指数：9999；
填充：9px 97px 26px 98px；
高度：105px；
保证金：0自动；
}
.标志包装{
浮动：左；
宽度：自动；
}
.主标志{
宽度：212px；
浮动：左；
}
.主标志a{
浮动：左；
}
.主标志img{
宽度：100%；
}
.主导航{
浮动：左；
保证金：0；
}
.主导航ul li{
显示：内联块；
填充：0 25px；
位置：相对位置；
}
.主导航ul li:之后{
位置：绝对位置；
最高：50%；
右：0；
宽度：24px；
高度：2倍；
}
主导航：最后一个孩子{
右边填充：21px；
}
.主导航ul li:最后一个孩子：之后{
显示：无；
}
.主导航ul li a{
颜色：#0c225f；
填充：2.5px0；
文字装饰：无；
字体系列：“HKGroteskBold”；
字号：19px；
}
.右标题{
浮动：对；
宽度：自动；
显示器：flex；
对齐项目：居中；
}
.右标题a{
垂直对齐：中间对齐；
显示器：flex；
对齐项目：居中；
文字装饰：无；
}
.电话{
填充：0 20px 0 10px；
}

文件

将以下样式添加到

菜单主菜单中

display: flex;
align-items: center;

您的
.logo wrap
值具有
float
值
left
，因此您需要确保其他子项具有类似的显示质量
inline
。为此，添加一个
float:left标题左侧的
类设置代码>样式。对于本例，我缩小了字体大小和填充，以演示新的浮点值和填充

我强烈建议研究“flex”来调整您的导航。使用flex，您可以将每个导航项目（徽标、链接、按钮）视为子项，并将它们与
justify content:center]垂直对齐。这样，您就不必担心浮动或填充问题


html{
框大小：边框框；
}
html，正文{
保证金：0；
填充：0；
边界：0；
}
身体{
字体系列：“HKGroteskRegular”；
}
*，*：之前，*：之后{
框大小：继承；
}
/*--------------标题导航--------------*/
.标题区{
位置：相对位置；
排名：0；
左：0；
宽度：100%；
z指数：9999；
填充：9px 97px 26px 98px；
高度：105px；
保证金：0自动；
}
.左标题{
浮动：左；/*已添加*/
填充：24px 0；/*已更新*/
}
.标志包装{
浮动：左；
宽度：自动；
}
.主标志{
宽度：48px；/*已更新*/
浮动：左；
填充：24px 0；/*已添加*/
}
.主标志a{
浮动：左；
}
.主标志img{
宽度：100%；
}
.主导航{
浮动：左；
保证金：0；
}
.main nav ul{
填充：0；/*已添加*/
边距：0；/*已添加*/
}
.主导航ul li{
显示：内联块；
填充：0 6px；
位置：相对位置；
}
.主导航ul li:之后{
位置：绝对位置；
最高：50%；
右：0；
宽度：24px；
高度：2倍；
}
主导航：最后一个孩子{
右边填充：21px；
}
.主导航ul li:最后一个孩子：之后{
显示：无；
}
.主导航ul li a{
颜色：#0c225f；
填充：2.5px0；
文字装饰：无；
字体系列：“HKGroteskBold”；
字号：8px；
}
.右标题{
浮动：对；
宽度：自动；
显示器：flex；
对齐项目：居中；
}
.右标题a{
垂直对齐：中间对齐；
显示器：flex；
对齐项目：居中；
文字装饰：无；
字体大小：8px；/*已添加*/
}
.电话{
填充：0 20px 0 10px；
}

文件







您可以使用
显示：flex；对齐项目：居中。在
。标题区域中

请以整页模式运行代码段


/*----全局样式-----*/
html{
框大小：边框框；
}
html，正文{
保证金：0；
填充：0；
边界：0；
}
身体{
字体系列：“HKGroteskRegular”；
}
*，*：之前，*：之后{
框大小：继承；
}
/*--------------标题导航--------------*/
.标题区{
位置：相对位置；
宽度：100%；
z指数：9999；
填充：9px 10px 26px 10px；
高度：105px；
保证金：0自动；
显示器：flex；
对齐项目：居中；
}
.主标志img{
宽度：100%；
}
.菜单{
左侧填充：0；
显示器：flex；
}
.主导航{
保证金：0；
}
.主导航ul li{
显示：内联块；
填充：0 25px；
位置：相对位置；
}
.主导航ul li:之后{
位置：绝对位置；
最高：50%；
右：0；
宽度：24px；
高度：2倍；
}
主导航：最后一个孩子{
右边填充：21px；
}
.主导航ul li:最后一个孩子：之后{
显示：无；
}
.主导航ul li a{
颜色：#0c225f；
填充：2.5px0；
文字装饰：无；
字体系列：“HKGroteskBold”；
字体大小：12px；
}
.右标题{
宽度：自动；
显示器：flex；
对齐项目：居中；
左边距：自动；
字体大小：12px；
}
.右标题a{
垂直对齐：mi