已经浏览了其他类似的帖子，找不到有徽标问题的类似帖子。
我目前正在尝试将导航栏与徽标居中。所以一切都完美契合，标志介于Products和Services之间
我刚刚开始使用CSS，有非常基本的知识。
另外，有人可以帮助我居中吗？ - 我需要导航栏以居中的方式穿过页面。正如你所看到的，我的不是居中。
谢谢
img{
height: 20px;
padding: 0;
}
.nav li{
list-style: none;
display: inline-block;
height: 100%;
padding: 10px;
}
.nav a{
text-decoration: none;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="styling.css" type="text/css">
</head>
<body>
<img src="logo.png">
<div class="nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Products</a></li>
<li><a href="/">Services</a></li>
<li><a href="/">News</a></li>
<li><a href="/">Contact</a></li>
</ul>
</ul>
</div>
</body>
<script src="app.js" charset="utf-8"></script>
</html>如果我理解正确，你想实现这样的事情：
请注意，下面的部分仅用于演示目的，以突出显示元素的位置和大小，您可以在使用 CSS 时使用。
.nav * {
border: 1px solid;
}
还要记住，您应该通过属性设置图像的至少一个大小，width或height，而不是在 CSS 中设置它。一旦您设置了一个大小，浏览器就会自动计算/缩放另一个大小。
此外，您可以根据需要调整图像的大小和img元素的margin-top。
.nav {
height: 50px;
}
.nav * {
border: 1px solid;
}
.nav img {
float: left;
margin-top: 10px;
}
.nav ul {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nav li {
list-style: none;
display: inline-block;
height: 100%;
margin: 0 10px;
display: flex;
justify-content: center;
align-items: center;
}
.nav a {
text-decoration: none;
}<div class="nav">
<img src="https://www.stackoverflowbusiness.com/hubfs/B2B-SO/images/logo-so-PRINT-4.png" height="25">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Products</a></li>
<li><a href="/">Services</a></li>
<li><a href="/">News</a></li>
<li><a href="/">Contact</a></li>
</ul>
</div>如果您希望图像和导航项在同一行上，则可以将div 放在.navdiv 中。然后，您可以使用以下命令将.navdiv 居中：
.nav {
display: table;
margin: 0 auto;
}
要将文本项与图像对齐，您还可以向.navdiv 中的ul元素添加display: inline。
请参阅以下示例：
img {
height: 20px;
padding: 0;
}
.nav { /* center nav div */
display: table;
margin: 0 auto;
}
.nav li {
list-style: none;
display: inline-block;
height: 100%;
padding: 10px;
font-size: 15px;
}
.nav a {
text-decoration: none;
}
.nav ul {
padding: 0;
display: inline;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="styling.css" type="text/css">
</head>
<body>
<div class="nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Products</a></li>
<li><img src="https://www.stackoverflowbusiness.com/hubfs/B2B-SO/images/logo-so-PRINT-4.png" /></li>
<li><a href="/">Services</a></li>
<li><a href="/">News</a></li>
<li><a href="/">Contact</a></li>
</ul>
</div>
</body>
<script src="app.js" charset="utf-8"></script>
</html>居中元素的一个好方法是将text-align: center应用于它们的容器div。在这种情况下，请将.nav{text-align: center;}添加到您的 CSS 中。