我试图将导航栏容器内的所有内容垂直居中，称为(标题区域)，以便所有内容都是内联的。目前，img、左导航和右导航在容器中的对齐方式都不同。
也欢迎使用替代解决方案。
/*-----Global Styles-----*/
html {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'HKGroteskRegular';
}
*, *:before, *:after {
box-sizing: inherit;
}
/*--------------Header-Navigation--------------*/
.header-area{
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
padding: 9px 97px 26px 98px;
height: 105px;
margin: 0 auto;
}
.logo-wrap{
float: left;
width: auto;
}
.main-logo{
width: 212px;
float: left;
}
.main-logo a{
float: left;
}
.main-logo img{
width: 100%;
}
.main-nav{
float: left;
margin: 0;
}
.main-nav ul li{
display: inline-block;
padding: 0 25px;
position: relative;
}
.main-nav ul li:after{
position: absolute;
top: 50%;
right: 0;
width: 24px;
height: 2px;
}
.main-nav ul li:last-child{
padding-right: 21px;
}
.main-nav ul li:last-child:after{
display: none;
}
.main-nav ul li a{
color: #0c225f;
padding: 2.5px 0;
text-decoration: none;
font-family: 'HKGroteskBold';
font-size: 19px;
}
.header-right{
float: right;
width: auto;
display: flex;
align-items: center;
}
.header-right a{
vertical-align: middle;
display: flex;
align-items: center;
text-decoration: none;
}
.phone {
padding: 0 20px 0 10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hk-grotesk" type="text/css"/>
<link rel="stylesheet" href="css/untitled.css">
<title>Document</title>
</head>
<body>
<div class="mainwrap">
<!--Header-->
<header class="header-area">
<div class="logo-wrap">
<div class="main-logo">
<a href="#"><img src="Assets/logo.png" alt="pd-logo"></a>
</div>
</div>
<div class="header-left">
<nav class="main-nav">
<ul id="menu-main-menu" class="menu">
<li><a href="#">Who We Are</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Stories</a></li>
<li><a href="#">Career</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="header-right">
<a href="#">Give us a Call<img class="phone" src="Assets/Phone.svg">0123456789</a>
</div>
</div>
</header>
</div>
</body>
</html>最佳答案
将以下样式添加到menu-main-menu ul
display: flex;
align-items: center;
关于html - 在导航栏内垂直对齐所有内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50395532/