有没有办法使用 flex 将导航栏文本与中心对齐？
[英]Is there a way to align the navbar text to the center using flex?
问题描述
I relly appreciate someone looking over this and letting me know the solution.
我非常感谢有人看过这个并让我知道解决方案。
Ignore the colors as I am just trying to learn CSS.忽略颜色，因为我只是想学习 CSS。 I have tried to make my navbar 100 px high but that has thrown my li to the top.我试图使我的导航栏高 100 像素，但这使我的 li 升到了顶部。 how would I go about getting the content to center in the navbar?我将如何让内容在导航栏中居中？ I have tried using align-items: center;我试过使用 align-items: center; and justify-content: center;和 justify-content: 中心； in the 'li's'.在'li's。
* { margin: 0; padding: 0; } body { font-family: 'Montserrat', sans-serif; font-size: 16px; } .top { background-color: darkseagreen; height: 100px; } .navbar { display: flex; list-style: none; font-size: 0.7em; margin: 0; } li { background-color: darkslateblue; padding: 20px; } a { color: white; text-decoration: none; font-weight: bold; } .push { margin-left: auto; } .cover { background-color: cornflowerblue; grid-column: 1/-1; grid-row: 2/3; } .javascript { background-color: crimson; grid-column: 1/2; grid-row: 3/4; } .secondrow { background-color: darkolivegreen; grid-column: 1/-1; grid-row: 4/5; }
<nav class="top"> <ul class="navbar"> <li><a href="#">About</a></li> <li><a href="#">Projects</a></li> <li class="push"><a href="#">Contact Us</a></li> </ul> </nav> <div class="cover"> <div><h1>Cover</h1></div> </div> <div class="javascript"><h1>Javascript</h1></div> <div class="secondrow"><h1>Second row</h1></div>
Many thanks.非常感谢。
5 个解决方案
解决方案1
0 2019-12-04 13:58:40
Your current snippet isn't that far off target, and you have the right idea to use justify-content here.您当前的代码段与目标相差不远，您有正确的想法在这里使用justify-content 。
The
justify-contentproperty aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).justify-content属性对齐灵活容器的项目。
The problem you're running into, is the fact that you want your final li element to be right aligned instead of centered with the other two.您遇到的问题是，您希望最终的li元素右对齐而不是与其他两个元素居中。 While this is possible, using margin-left: auto isn't the proper solution for it.虽然这是可能的，但使用margin-left: auto不是合适的解决方案。 By using margin-left: auto on the final li element, you're telling that element to create as big of a margin as it possibly can, filling the remaining space on the main axis of the parent element.通过在最后一个li元素上使用margin-left: auto ，您告诉该元素创建尽可能大的边距，填充父元素主轴上的剩余空间。 This forces your other two elements to the left hand side of your nav element, and negates the use of justify-content: center .这会强制您的其他两个元素位于nav元素的左侧，并取消justify-content: center 。
My recommendation would be to absolutely position the final li element within the nav element, and use a media query to bring it back to relative positioning once the left edge touches the next element in line.我的建议是将最后的li元素绝对定位在nav元素中，并在左边缘接触到下一个元素时使用媒体查询将其恢复到相对定位。
* { margin: 0; padding: 0; } body { font-family: "Montserrat", sans-serif; font-size: 16px; } .top { background-color: darkseagreen; height: 100px; } .navbar { position: relative; display: flex; justify-content: center; width: 100%; list-style: none; font-size: 0.7em; margin: 0; } li { background-color: darkslateblue; padding: 20px; } a { color: white; text-decoration: none; font-weight: bold; } .push { position: absolute; top: 0; right: 0; } .cover { background-color: cornflowerblue; grid-column: 1/-1; grid-row: 2/3; } .javascript { background-color: crimson; grid-column: 1/2; grid-row: 3/4; } .secondrow { background-color: darkolivegreen; grid-column: 1/-1; grid-row: 4/5; } @media only screen and (max-width: 355px) { .push { position: relative; } }
<nav class="top"> <ul class="navbar"> <li><a href="#">About</a></li> <li><a href="#">Projects</a></li> <li class="push"><a href="#">Contact Us</a></li> </ul> </nav> <div class="cover"> <div> <h1>Cover</h1> </div> </div> <div class="javascript"> <h1>Javascript</h1> </div> <div class="secondrow"> <h1>Second row</h1> </div>
解决方案2
0 2019-12-04 14:00:11
align-items: center; and justify-content: center;和justify-content: center; have to be properties of the element with display: flex;必须是具有display: flex;的元素的属性display: flex; , .navbar in your case. , .navbar 在你的情况下。
However, the property of .push margin-left:auto is also pushing the previous li-s to the left so .push has as big margin-left as it can.但是， .push margin-left:auto的属性也将之前的 li-s 向左推送，因此 .push 具有尽可能大的 margin-left 。 If you remove that property all three will be in the middle.如果您删除该属性，则所有三个都将位于中间。
Then, I would try with absolute positioning on .push to position it on the right.然后，我会尝试在 .push 上使用绝对定位将其定位在右侧。
解决方案3
0
The navbar now in it correct position导航栏现在处于正确位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" text="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<nav class="top">
<ul class="navbar">
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li class="push"><a href="#">Contact Us</a></li>
</ul>
</nav>
<div class="cover">
<div>
<h1>Cover</h1>
</div>
</div>
<div class="javascript">
<h1>Javascript</h1>
</div>
<div class="secondrow">
<h1>Second row</h1>
</div>
<script src="script.js">
</script>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}
.top {
background-color: darkseagreen;
height: 100px;
}
.navbar {
display: flex;
justify-content: center;
list-style: none;
font-size: 0.7em;
margin: 0;
background-color: darkslateblue;
}
li {
padding: 20px;
}
a {
color: white;
text-decoration: none;
font-weight: bold;
}
.push {}
.cover {
background-color: cornflowerblue;
grid-column: 1/-1;
grid-row: 2/3;
}
.javascript {
background-color: crimson;
grid-column: 1/2;
grid-row: 3/4;
}
.secondrow {
background-color: darkolivegreen;
grid-column: 1/-1;
grid-row: 4/5;
}
解决方案4
0 2019-12-04 15:05:57
I'm creating a second answer based on your comments because I think there was some confusion.我正在根据您的评论创建第二个答案，因为我认为存在一些混淆。 It now seems that your intent is to center the elements vertically within the nav element, and you have the right idea to use align-items for this.现在看来，您的意图是将元素垂直居中在nav元素中，您对此使用align-items有正确的想法。 The problem is, your nav element doesn't have any height to it, so align-items is negated.问题是，您的nav元素没有任何高度，因此align-items被否定。 To fix this, give your nav element some height:为了解决这个问题，给你的nav元素一些高度：
* { margin: 0; padding: 0; } body { font-family: "Montserrat", sans-serif; font-size: 16px; } .top { background-color: darkseagreen; height: 100px; } .navbar { position: relative; display: flex; align-items: center; width: 100%; height: 100px; list-style: none; font-size: 0.7em; margin: 0; } li { background-color: darkslateblue; padding: 20px; } a { color: white; text-decoration: none; font-weight: bold; } .push { margin-left: auto; } .cover { background-color: cornflowerblue; grid-column: 1/-1; grid-row: 2/3; } .javascript { background-color: crimson; grid-column: 1/2; grid-row: 3/4; } .secondrow { background-color: darkolivegreen; grid-column: 1/-1; grid-row: 4/5; }
<nav class="top"> <ul class="navbar"> <li><a href="#">About</a></li> <li><a href="#">Projects</a></li> <li class="push"><a href="#">Contact Us</a></li> </ul> </nav> <div class="cover"> <div> <h1>Cover</h1> </div> </div> <div class="javascript"> <h1>Javascript</h1> </div> <div class="secondrow"> <h1>Second row</h1> </div>解决方案5
0 2019-12-04 16:14:33
Add align-items property to .top (nav) because ul is group of li and present in .top & give 100% width to navbar:将 align-items 属性添加到.top (nav) 因为ul是一组li并且存在于.top并为导航栏提供 100% 的宽度：
.top {
height: 100px;
display:flex;
/**justify-content:center;**/
align-items: center;
}
* { margin: 0; padding: 0; } body { font-family: 'Montserrat', sans-serif; font-size: 16px; } .top { background-color: darkseagreen; height: 100px; display:flex; /**justify-content:center;**/ align-items: center; } .navbar { display: flex; width:100%; list-style: none; font-size: 0.7em; margin: 0; } li { background-color: darkslateblue; padding: 20px; } a { color: white; text-decoration: none; font-weight: bold; } .push { margin-left: auto; } .cover { background-color: cornflowerblue; grid-column: 1/-1; grid-row: 2/3; } .javascript { background-color: crimson; grid-column: 1/2; grid-row: 3/4; } .secondrow { background-color: darkolivegreen; grid-column: 1/-1; grid-row: 4/5; }
<nav class="top"> <ul class="navbar"> <li><a href="#">About</a></li> <li><a href="#">Projects</a></li> <li class="push"><a href="#">Contact Us</a></li> </ul> </nav> <div class="cover"> <div><h1>Cover</h1></div> </div> <div class="javascript"><h1>Javascript</h1></div> <div class="secondrow"><h1>Second row</h1></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.