我对HTML和CSS非常陌生，在学习时面临以下问题：我在左边找到了徽标，在右边找到了超链接。但是，不幸的是，我无法在中心找到超链接(基于徽标的中心(：输出屏幕截图
CSS：
<style>
.Logo-Car-With-Text {
width: 48px;
height: 48px;
margin: 0 461px 0 0;
object-fit: contain;
}
.Background {
width: 900px;
height: 72px;
padding: 12px 150px;
box-shadow: inset 0 -1px 0 0 #e7e7e7;
background-color: #ffffff;
}
.Help-Support {
width: 91px;
height: 16px;
margin: 18px 0 16px 461px;
font-family: Arial;
font-size: 12px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.33;
letter-spacing: 0.2px;
text-align: right;
color: #007f00;
}
</style>
HTML:
<div class="Background">
<img src="images/download.png" class="Logo-Car-With-Text">
<a class="Help-Support" href="https://www.google.com/">Help & Support</a>
</div>
使用flex对元素进行对齐和居中。在父容器上放置一个display: flex，然后添加两个justify-content: space-between(将项目放置在父容器的相对两侧(，然后添加align-items: center(将垂直对齐父容器中的子元素(。
.Logo-Car-With-Text {
width: 48px;
height: 48px;
object-fit: contain;
display: flex;
flex: 1;
justify-content: flex-start;
}
.Background {
width: 900px;
height: 72px;
padding: 12px 150px;
box-shadow: inset 0 -1px 0 0 #e7e7e7;
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
}
.Help-Support {
height: 16px;
font-family: Arial;
font-size: 12px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.33;
letter-spacing: 0.2px;
color: #007f00;
display: flex;
justify-content: flex-end;
flex: 1;
}<div class="Background">
<img src="https://cdn.logo.com/hotlink-ok/logo-social.png" class="Logo-Car-With-Text">
<a class="Help-Support" href="https://www.google.com/">Help & Support</a>
</div>我想这就是您所需要的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nav-content {
display: inline-block;
align-items: center;
background: #12151c;
font-family: "Poppins", sans-serif;
width: 100%;
}
.nav-logo {
position: relative;
display: inline-block;
justify-content: center;
}
.menu-list {
position: relative;
display: inline-block;
min-width: 300px;
text-align: right;
right: 5px;
height: 120px;
float: right;
}
.menu-list ul#menu {
position: relative;
width: auto;
display: flex;
align-items: center;
justify-content: center;
height: 95px;
}
#menu li {
list-style: none;
padding: 10px 10px;
margin: 0 0.3vh;
}
#menu li a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
}
</style>
</head>
<body>
<nav class="nav-content">
<div class="nav-logo">
<a href="www.google.com">
<img src="https://i.imgur.com/cBBxvvn.png">
</a>
</div>
<div class="menu-list">
<ul id="menu">
<li><a href='#'>Help & Support</a></li>
</ul>
</div>
</nav>
</body>
</html>