如何解决如何将页面中间的导航按钮彼此对齐,使图像居中?
我的目标是让我的NAV导航栏按钮在页面中央彼此相邻,如下所示:
加上我的图像由于某种原因未居中。
@font-face {
src: url(font/BebasNeue-Regular.ttf);
font-family: "Bebas Neue";
}
body {
background-color: #eeeeee;
font-family: 'Bebas Neue',cursive;
}
li {
list-style-type: none;
padding: 0%;
margin: 0%;
}
#header {
align-content: center;
}
#nav-bar {
position: fixed;
top: 0;
width: 100%;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: inline-block;
}
<header id="header">
<img src="image/logo.jpg" alt="Multi-Vitamins" id="header-img" />
<nav id="nav-bar">
<ul>
<li><a href="#About" class="nav-link">About</a></li>
<li><a href="#Work" class="nav-link">How it works</a></li>
<li><a href="#Pricing" class="nav-link">Pricing</a></li>
</ul>
</nav>
</header>
<section id="About">
<iframe src="https://youtu.be/ISZLTJH5lYg" frameborder="0" title="Video about Multi-Vitamins" allowfullscreen></iframe>
</section>
<section id="work"></section>
<section id="Pricing"></section>
<form id="form" action=" https://www.freecodecamp.com/email-submit">
<input name="email" id="email" type="email" placeholder="enter your email here" required />
<input name="submit" id="submit" type="submit" />
</form>
解决方法
您可以使用display:flex作为标题,并使用align-items将它们在中心水平对齐。并让您的导航项彼此对齐,您可以为它们显示:inline-block;
@font-face {
src: url(font/BebasNeue-Regular.ttf);
font-family: "Bebas Neue";
}
body {
background-color: #eeeeee;
font-family: 'Bebas Neue',cursive;
}
li {
list-style-type: none;
display: inline-block;
}
ul{
padding:0;
}
#header{
display: flex;
justify-content: space-between;
align-items: center;
}
#nav-bar{
color: #f2f2f2;
text-decoration: none;
font-size: 17px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="plp.css" />
<title>Multi-Vitamins</title>
</head>
<body>
<header id="header">
<img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
<nav id="nav-bar">
<ul>
<li><a href="#About" class="nav-link">About</a></li>
<li><a href="#Work" class="nav-link">How it works</a></li>
<li><a href="#Pricing" class="nav-link">Pricing</a></li>
</ul>
</nav>
<div></div>
</header>
<section id="About">
<iframe
src="https://youtu.be/ISZLTJH5lYg"
frameborder="0"
title="Video about Multi-Vitamins"
allowfullscreen
></iframe>
</section>
<section id="work"></section>
<section id="Pricing"></section>
<form id="form" action=" https://www.freecodecamp.com/email-submit">
<input
name="email"
id="email"
type="email"
placeholder="enter your email here"
required
/>
<input name="submit" id="submit" type="submit" />
</form>
</body>
</html>
强文本
,您缺少几件事。首先,将列表项设置为嵌入式布局:
li {
...
display: inline-block;
}
然后,align-content
不起作用,除非您也使用弹性布局:
#header {
display: flex;
...
}
那让你靠近。有关获得所需间距的帮助,请参见https://css-tricks.com/snippets/css/a-guide-to-flexbox。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。