我正在尝试构建一个导航栏，该导航栏的徽标/图像位于顶部居中，其下方的导航菜单也位于居中位置。目前，我的导航链接不在右侧的中心。如何获得这些导航链接在标题的第二行居中？
我曾尝试在position: relative;和nav ul {}下使用nav li {}，但没有变化。
我似乎无法弄清到目前为止我做错了什么，这可能是我过去想过的简单事情。
HTML：
<!DOCTYPE html>
<html>
<head>
<title>House of Vibe Productions</title>
<!-- title appears in browser tab -->
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<!-- linking to stylsheet.css file for styling -->
<link href="photos/favicon.png" rel="icon" type="image/gif" sizes="16x16">
<!-- linking to the favicon -->
<meta charset="UTF-8">
<!-- UTF-8 is the default character set for HTML5 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- viewport gives browser instructions on how to control the page's dimensions and scaling -->
<!-- width=device-width sets the width of the page to follow the screen-width of the device --->
<!-- 1.0 scale sets the initial zoon level when the page is first loaded by the browser -->
<meta name="robots" content="index, follow">
<!-- allows the spider of a search engine to index the whole website -->
<meta name="keywords" content="house of vibe, production, music, studio, artist, artists, los angeles, ">
<meta name="description" content="House of Vibe Productions">
<!-- Use no more than 200 characters. This is the description that appears in the search results on search engines -->
<meta name="author" content="Jacki Leigh Designs">
</head>
<body>
<div id=wrapper>
<header>
<div class="container">
<div class="headerLogo">
<a href="index.html">
<img src="https://via.placeholder.com/200x50?text=HOV+Productions+Logo+Placeholder" alt="HOV Productions Logo" class="headerLogoImg">
</a>
</div>
<nav>
<ul class="nav-links">
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<br />
<div class="mainImg">
<img src="https://via.placeholder.com/300x100?text=HOV+Image+Placeholder" alt="Main Image" class="mainImgIndex">
</div>
<br />
<br />
<footer>
<small>copyright © <script type="text/javascript">document.write(new Date().getFullYear());</script> House of Vibe Productions</small>
</style>
</footer>
<br />
</div>
</body>
</html>
CSS：
body {
margin: 0;
background-color: #B73114;
font-family: sans-serif;
font-weight: 300;
font-style: normal;
}
#wrapper { /* site wrapper div */
}
header {
background-color: #FDEEFD;
width: 100%;
}
.container { /* container div for header (nav bar) */
text-align: center;
display: block;
}
.headerLogo {
}
.headerLogoImg {
display: block;
text-align: center;
margin: 0 auto;
padding: 8px;
}
nav {
text-transform: uppercase;
padding: 4px;
}
nav ul {
margin: 0;
padding: 2px;
list-style: none;
text-align: center;
}
a {
text-decoration: none;
}
nav li {
display: inline-block; /* places list horizontal, not vertical */
margin-left: 30px; /* specifies the space between the list items */
font-size: 15px;
}
.nav-links { /* navigation links */
}
.mainImg { /* main image div on index page */
text-align: center;
}
footer {
text-align: center;
}
将margin-left: 30px;更改为margin: 0px 15px;。在一侧增加边距只会使其不对称。
您可以使用display: flex和justify-content: space-between
.nav-links {
display: flex;
justify-content: space-between;
width: 200px;
margin: 0 auto;
}
nav li {
display: inline-block;
font-size: 15px;
/* margin-left: 30px; */
}
半不相关：在修复此问题时，我发现this link，它在中间显示了蓝线-对于认为页面上的元素是否居中，我认为这很理想
.here:after {
content: "";
position: absolute;
z-index: 9999;
top: 0;
bottom: 0;
left: 50%;
border-left: 2px dotted #ff0000;
transform: translate(-50%);
}
div {
margin: 10px auto;
width: 60%;
height: 100px;
border: 1px solid #333;
position: relative;
text-align: center
}<div class="here"></div>