如何将导航链接设置为与徽标相同的高度?
How to set navigation links to same height as logo?
我正在制作导航菜单,如下所示。
/*
Variables
*/
body {
font: 100% "Lato", sans-serif;
margin: 0;
}
#container {
width: 100%;
margin-top: 47px;
}
/*
Navigation menu
*/
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
top: 0;
width: 100%;
/*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
border-bottom: solid 3px #21ce99;
z-index: 1;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: #21ce99;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #F2F2F2;
}
/*
Layout
*/
section {
position: relative;
float: left;
width: 60%;
background-color: white;
}
aside {
position: relative;
float: right;
width: 40%;
clear: right;
}
footer {
clear: both;
background-color: #21ce99;
height: 500px;
}
/*
Styling
*/
h1 {
color: rgba(0, 0, 0, 0.87);
font: 300% "Lato", sans-serif;
padding: 30px;
}
p {
color: rgba(0, 0, 0, 0.54);
font-size: 1.3em;
margin: 20px;
}
a#logo {
font: 300% 'Wire One', sans-serif;
}
img {
width: 100%;
max-width: 600px;
margin: 10px;
}
table, th, td {
border: solid .13em #16a085;
border-radius: .3em;
font-size: 15px;
padding: 10px;
border-collapse: collapse;
}
/*
Widgets
*/
.btn {
padding: 1em 1em;
display: inline-block;
border-radius: .38em;
border: .12em solid #21ce99;
text-decoration: none;
color: #21ce99;
margin: 20px;
}
.btn:hover {
background-color: #21ce99;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<link href='https://fonts.googleapis.com/css?family=Wire+One|Lato:100,100italic,300,300italic,400italic,400,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<title>methusela</title>
</head>
<body>
<nav>
<ul>
<li><a id="logo" href="index.html">methusela</a></li>
<li><a href="index.html">Discover</a></li>
<li><a href="histoire.html">Buy</a></li>
<li><a href="contact.html">Yes</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div id="container">
<section>
<h1></h1>
<a href="#" class="btn">
Learn more
</a>
</section>
<aside>
<img src="" />
</aside>
<footer>
</footer>
</div>
</body>
</html>
所有的链接本来都是垂直的在导航框的中间,但是在我添加了一个使用不同大小文本的标志之后。所有菜单链接不再位于中间。
有没有办法让菜单链接的尺寸自动填满整个框以与最大的项目对齐?或者有没有办法让链接在框内垂直居中?
非常感谢您的帮助。
将 ul
显示为 flex
并使用 align-items: center
和 justify-content: center
属性将它们分别垂直和水平放置在框的中央。
nav ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
top: 0;
width: 100%;
/*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
border-bottom: solid 3px #21ce99;
z-index: 1;
}
当您使用 align-items: center
时,您的元素在 flex
容器内垂直居中。
当您使用 justify-content: center
时,您的元素在 flex
容器内水平居中。
我正在制作导航菜单,如下所示。
/*
Variables
*/
body {
font: 100% "Lato", sans-serif;
margin: 0;
}
#container {
width: 100%;
margin-top: 47px;
}
/*
Navigation menu
*/
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
top: 0;
width: 100%;
/*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
border-bottom: solid 3px #21ce99;
z-index: 1;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: #21ce99;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #F2F2F2;
}
/*
Layout
*/
section {
position: relative;
float: left;
width: 60%;
background-color: white;
}
aside {
position: relative;
float: right;
width: 40%;
clear: right;
}
footer {
clear: both;
background-color: #21ce99;
height: 500px;
}
/*
Styling
*/
h1 {
color: rgba(0, 0, 0, 0.87);
font: 300% "Lato", sans-serif;
padding: 30px;
}
p {
color: rgba(0, 0, 0, 0.54);
font-size: 1.3em;
margin: 20px;
}
a#logo {
font: 300% 'Wire One', sans-serif;
}
img {
width: 100%;
max-width: 600px;
margin: 10px;
}
table, th, td {
border: solid .13em #16a085;
border-radius: .3em;
font-size: 15px;
padding: 10px;
border-collapse: collapse;
}
/*
Widgets
*/
.btn {
padding: 1em 1em;
display: inline-block;
border-radius: .38em;
border: .12em solid #21ce99;
text-decoration: none;
color: #21ce99;
margin: 20px;
}
.btn:hover {
background-color: #21ce99;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<link href='https://fonts.googleapis.com/css?family=Wire+One|Lato:100,100italic,300,300italic,400italic,400,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<title>methusela</title>
</head>
<body>
<nav>
<ul>
<li><a id="logo" href="index.html">methusela</a></li>
<li><a href="index.html">Discover</a></li>
<li><a href="histoire.html">Buy</a></li>
<li><a href="contact.html">Yes</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div id="container">
<section>
<h1></h1>
<a href="#" class="btn">
Learn more
</a>
</section>
<aside>
<img src="" />
</aside>
<footer>
</footer>
</div>
</body>
</html>
所有的链接本来都是垂直的在导航框的中间,但是在我添加了一个使用不同大小文本的标志之后。所有菜单链接不再位于中间。
有没有办法让菜单链接的尺寸自动填满整个框以与最大的项目对齐?或者有没有办法让链接在框内垂直居中?
非常感谢您的帮助。
将 ul
显示为 flex
并使用 align-items: center
和 justify-content: center
属性将它们分别垂直和水平放置在框的中央。
nav ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
top: 0;
width: 100%;
/*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
border-bottom: solid 3px #21ce99;
z-index: 1;
}
当您使用 align-items: center
时,您的元素在 flex
容器内垂直居中。
当您使用 justify-content: center
时,您的元素在 flex
容器内水平居中。