html - 如何让我的导航栏完美居中,徽标/图像居中在顶部
问题描述
我正在尝试构建一个导航栏,其顶部居中的徽标/图像和下方的导航菜单也居中。目前,我的导航链接偏离中心,稍微偏右。我怎样才能让这些导航链接以标题的第二行为中心?
我曾尝试使用position: relative;
under nav ul {}
and 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;
。在一侧添加边距只会使其不对称。
推荐阅读
- configuration - wso2 从axis2.xml外部化jms代理IP
- r - 解压缩错误(文件,exdir = tmp):“exdir”不存在(Windows 10 R 安装)
- asana - 使用 Zapier 更新 Asana 任务自定义字段值
- docker - 从运行在容器内(托管在 Windows 中)的 .net Core api 连接到在主机上运行的 Identity Web 服务会产生错误 400 Bad Request
- solr - Solr 拼写检查和词干过滤器
- java - SpotBugs“没有为属性‘spotbugsClasspath’指定值”
- actions-on-google - Google 在每次访问后生成新的 UserId(Alpha 阶段)
- python - 使用 tkinter 和 openpyxl 遍历电子表格的最佳方式?
- php - 处理来自 3rd 方 API 的错误
- java - 能够使用杰克逊循环从 json 响应返回的每个用户