如何让我的导航栏完美居中，徽标/图像居中在顶部
Posted
技术标签:
【中文标题】如何让我的导航栏完美居中，徽标/图像居中在顶部【英文标题】：How can I get my navbar centered perfectly with a logo/image centered on top 【发布时间】：2020-03-17 23:59:05 【问题描述】：我正在尝试构建一个导航栏，其顶部居中的徽标/图像和下方的导航菜单也居中。目前，我的导航链接偏离中心，稍微偏右。我怎样才能让这些导航链接以标题的第二行为中心？
我曾尝试在nav ul 和nav li 下使用position: relative;，但没有任何变化。
到目前为止，我似乎无法弄清楚我做错了什么，这可能是我正在寻找过去的简单事情。
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" 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" 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;
【问题讨论】：
【参考方案1】：将margin-left: 30px; 更改为margin: 0px 15px;。在一侧添加边距只会使其不对称。
【讨论】：
这正是我没有看到的。谢谢！！ :) 我的荣幸。 :)以上是关于如何让我的导航栏完美居中，徽标/图像居中在顶部的主要内容，如果未能解决你的问题，请参考以下文章
导航栏中的徽标在 Internet Explorer 中未正确居中