HTML / CSS的新手，目前我最大的挣扎是创建带有徽标的导航栏。我正在设置一个水平导航栏，其徽标图像位于导航栏的左侧。我希望导航和图像都位于网站的中心。我的导航不完全居中，我的徽标位于右侧，并且未与导航链接对齐。
我尝试过flex，float和margin，但是没有任何运气。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
color: #fff;
font-family: 'Barlow', sans-serif;
}
header {
color: white;
background-color: black;
padding: 25px 0 25px 0;
}
/* Navigation */
.main-logo {}
.main-nav {
display: flex;
justify-content: space-around;
align-items: center;
}
.main-nav ul {
display: flex;
justify-content: space-around;
width: 40%;
list-style: none;
}
.main-nav a {
color: #fff;
width: 100px;
padding: 0;
display: block;
text-decoration: none;
text-transform: uppercase;
text-align: center;
}
.main-nav li {
float: left;
margin-top: 15px;
padding: 0;
}
/* Links */
a:hover {
color: #a8a8a8;
}
body a:visited {
color: #fff;
}
.intro-content {
padding-top: 170px;
height: 850px;
background: linear-gradient(red, transparent 90%), linear-gradient(0deg, #000, transparent), #ffa949 url('img/header-bg.jpg') no-repeat center;
background-size: cover;
}
.intro-content h1 {
color: white;
font-size: 3.25rem;
/* 26px/16px */
letter-spacing: .065em;
font-weight: 200;
padding: 75px 0 5px 0;
}
.main-content,
.intro-content,
.main-footer {
text-align: center;
}
.main-content {
padding-top: 25px;
padding-bottom: 95px;
}
.secondary-content {
text-align: center;
padding-top: 80px;
padding-bottom: 70px;
border-bottom: 2px solid #dfe2e6;
}
.socialmedia {
text-align: center;
margin: 50px 0 20px 0;
}
.socialmedia a {
margin: 0 25px 0 25px;
color: white;
font-size: 1.5rem;
}
.main-footer {
margin-bottom: 50px;
}
.t-border {
border-top: 2px solid #dfe2e6;
}
/* Layout */
.main-content,
.secondary-content {
width: 75%;
padding-left: 25px;
padding-right: 25px;
margin: auto;
max-width: 960px;
}
/* Floats */
.article1,
.article2 {
width: 40%;
}
.article2 {
float: left;
}
.article1 {
float: right;
}
/* Float Clearfix */
.group:after {
content: "";
display: table;
clear: both;
}<DOCTYPE! html>
<html lang="en-US" dir="ltr">
<head>
<meta name="viewport" content="width=device-width">
<meta charset="UTF-utf-8">
<title>100 Thieves | Home</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Barlow&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/ab11039b93.js"></script>
</head>
<body>
<header>
<div class="main-logo">
<a href="index.html"><img src="Img/100Thieves.png" alt="100 Thieves Logo"></a>
</div>
<div class="main-nav">
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Teams</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Careers</a></li>
</ul>
</nav>
</div>
</header>
<div class="intro-content">
<h1>Take What's Not Given</h1>
<p>The words of Matt "Nadeshot" Haag and the official 100 Thieves motto</p>
</div>
<div class="main-content">
<div class="about">
<h2>About 100 Thieves</h2>
<p>100 Thieves is a new gaming lifestyle company and eSports organization built at the intersection of competitive gaming, entertainment, and apparel. 100 Thieves was founded in 2017 by Matt "Nadeshot" Haag, the former Optic Gaming Call of Duty captain,
X Games gold medalist, and 2014 eSports athlete of the year. After retiring from competitive play, Matt went on to build some of the most popular gaming channels on twitch and youtube, and then founded 100 Thieves as a creative outlet for his
passions in competitive gaming, storytelling, and streetwear. The company currently competes in professional League of Legends, Call of Duty, Fortnite and Apex Legends.
</p>
</div>
<div class="cashapp">
<h2>About Cash App</h2>
<p>Cash App is the money app. It's the easiest way to pay people back—friends, family, coworkers—anyone, really. Sending and receiving money is totally free and fast, and most payments can be deposited directly to your bank account in just a few
seconds. With cash app, you can also buy and sell bitcoin instantly, get a paycheck deposited right to the app, or create a unique $cashtag that you can share with anyone to get paid fast. You can even use the free cash card to spend the money
you keep in the app anywhere you like. Customize your card with a laser-etching and add a boost from the app to instantly save at some of your favorite places whenever you swipe.
<a href="http://www.cash.app/download">Download</a> cash app for free.
</p>
</div>
</div>
<div class="secondary-content t-border group">
<div class="article1">
<img src="Img/win.png" alt="100 Thieves wins at CWL London">
<h2>Big Win at CWL London</h2>
<p>100 Thieves won their first ever Call of Duty eSports title on May 5, 2019. After knocking out top teams like Envy, Team Heretics, and Team Reciprocity, and sweeping OpTic Gaming aside with ease, 100 Thieves was matched against eUnited. It was
a close fought affair all through the match, and with both teams mere seconds away from claiming victory, 100 Thieves managed to hold on to the point and won the final map 250-238.
<p><a href="https://www.gamesradar.com/cwl-london-2019-recap-winner/">Read more...</a></p>
</div>
<div class="article2">
<img src="Img/franchise.png" alt="100 Thieves gunning for the Los Angeles franchise">
<h2>Gunning the Los Angeles Franchise</h2>
<p>One of the most sought after spots in the competition is the Los Angeles franchise, and according to reports 100 Thieves are hoping to raise more money in the hopes of locking down the California position. If successful, it’s believed that 100
Thieves would be the sole team based in Los Angeles in the Call of Duty franchise league, an ideal situation as the team’s headquarters and LCS teams are both based in the city.</p>
<p><a href="https://www.dexerto.com/call-of-duty/100-thieves-reportedly-raising-25-million-for-call-of-duty-franchise-spot-675708">Read more...</a></p>
</div>
</div>
<div class="socialmedia">
<h3>Follow 100 Thieves</h3>
<a href="https://twitter.com/100Thieves"><i class="fab fa-twitter"></i></a>
<a href="http://instagram.com/100thieves"><i class="fab fa-instagram"></i></a>
<a href="https://www.youtube.com/100thieves"><i class="fab fa-youtube"></i></a>
<a href="https://www.twitch.tv/team/100thieves"><i class="fab fa-twitch"></i></a>
</div>
<div class="main-footer">
<footer>
© 100 Thieves, LLC 2019
</footer>
</div>
</body>
</html>
答案 0 :(得分：0)
在我添加display: flex属性以使导航向右对齐并从{{删除margin-left: auto属性之后，我在标题标签中添加了margin-top CSS属性以内嵌导航和徽标1}}
li* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
color: #fff;
font-family: 'Barlow', sans-serif;
}
header {
color: white;
background-color: black;
padding: 25px 0 25px 0;
display: flex;
}
/* Navigation */
.main-logo {
}
.main-nav {
display: flex;
justify-content: space-around;
align-items: center;
margin-left: auto;
}
.main-nav ul {
display: flex;
justify-content: space-around;
width: 40%;
list-style: none;
}
.main-nav a {
color: #fff;
width: 100px;
padding: 0;
display: block;
text-decoration: none;
text-transform: uppercase;
text-align: center;
}
.main-nav li {
float: left;
padding: 0;
}
/* Links */
a:hover {
color: #a8a8a8;
}
body a:visited {
color: #fff;
}
.intro-content {
padding-top: 170px;
height: 850px;
background: linear-gradient(red, transparent 90%),
linear-gradient(0deg, #000, transparent),
#ffa949 url('img/header-bg.jpg') no-repeat center;
background-size: cover;
}
.intro-content h1 {
color: white;
font-size: 3.25rem; /* 26px/16px */
letter-spacing: .065em;
font-weight: 200;
padding: 75px 0 5px 0;
}
.main-content,
.intro-content,
.main-footer {
text-align: center;
}
.main-content {
padding-top: 25px;
padding-bottom: 95px;
}
.secondary-content {
text-align: center;
padding-top: 80px;
padding-bottom: 70px;
border-bottom: 2px solid #dfe2e6;
}
.socialmedia {
text-align: center;
margin: 50px 0 20px 0;
}
.socialmedia a {
margin: 0 25px 0 25px;
color: white;
font-size: 1.5rem;
}
.main-footer {
margin-bottom: 50px;
}
.t-border {
border-top: 2px solid #dfe2e6;
}
/* Layout */
.main-content,
.secondary-content {
width: 75%;
padding-left: 25px;
padding-right: 25px;
margin: auto;
max-width: 960px;
}
/* Floats */
.article1,
.article2 {
width: 40%;
}
.article2 {
float: left;
}
.article1 {
float: right;
}
/* Float Clearfix */
.group:after {
content: "";
display: table;
clear: both;
}
答案 1 :(得分：0)
如果要使徽标居中，可以使用text-align: center;。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
color: #fff;
font-family: 'Barlow', sans-serif;
}
header {
color: white;
background-color: black;
padding: 25px 0 25px 0;
}
/* Navigation */
.main-logo {
text-align: center;
}
.main-nav {
display: flex;
justify-content: space-around;
align-items: center;
}
.main-nav ul {
display: flex;
justify-content: space-around;
width: 40%;
list-style: none;
}
.main-nav a {
color: #fff;
width: 100px;
padding: 0;
display: block;
text-decoration: none;
text-transform: uppercase;
text-align: center;
}
.main-nav li {
float: left;
margin-top: 15px;
padding: 0;
}
/* Links */
a:hover {
color: #a8a8a8;
}
body a:visited {
color: #fff;
}
.intro-content {
padding-top: 170px;
height: 850px;
background: linear-gradient(red, transparent 90%), linear-gradient(0deg, #000, transparent), #ffa949 url('img/header-bg.jpg') no-repeat center;
background-size: cover;
}
.intro-content h1 {
color: white;
font-size: 3.25rem;
/* 26px/16px */
letter-spacing: .065em;
font-weight: 200;
padding: 75px 0 5px 0;
}
.main-content,
.intro-content,
.main-footer {
text-align: center;
}
.main-content {
padding-top: 25px;
padding-bottom: 95px;
}
.secondary-content {
text-align: center;
padding-top: 80px;
padding-bottom: 70px;
border-bottom: 2px solid #dfe2e6;
}
.socialmedia {
text-align: center;
margin: 50px 0 20px 0;
}
.socialmedia a {
margin: 0 25px 0 25px;
color: white;
font-size: 1.5rem;
}
.main-footer {
margin-bottom: 50px;
}
.t-border {
border-top: 2px solid #dfe2e6;
}
/* Layout */
.main-content,
.secondary-content {
width: 75%;
padding-left: 25px;
padding-right: 25px;
margin: auto;
max-width: 960px;
}
/* Floats */
.article1,
.article2 {
width: 40%;
}
.article2 {
float: left;
}
.article1 {
float: right;
}
/* Float Clearfix */
.group:after {
content: "";
display: table;
clear: both;
}<header>
<div class="main-logo" >
<a style=" margin: auto;" href="index.html"><img src="Img/100Thieves.png" alt="100 Thieves Logo"></a>
</div>
<div class="main-nav">
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Teams</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Careers</a></li>
</ul>
</nav>
</div>
</header>
<div class="intro-content">
<h1>Take What's Not Given</h1>
<p>The words of Matt "Nadeshot" Haag and the official 100 Thieves motto</p>
</div>
<div class="main-content">
<div class="about">
<h2>About 100 Thieves</h2>
<p>100 Thieves is a new gaming lifestyle company and eSports organization built at the intersection of competitive gaming, entertainment, and apparel. 100 Thieves was founded in 2017 by Matt "Nadeshot" Haag, the former Optic Gaming Call of Duty captain,
X Games gold medalist, and 2014 eSports athlete of the year. After retiring from competitive play, Matt went on to build some of the most popular gaming channels on twitch and youtube, and then founded 100 Thieves as a creative outlet for his
passions in competitive gaming, storytelling, and streetwear. The company currently competes in professional League of Legends, Call of Duty, Fortnite and Apex Legends.
</p>
</div>
<div class="cashapp">
<h2>About Cash App</h2>
<p>Cash App is the money app. It's the easiest way to pay people back—friends, family, coworkers—anyone, really. Sending and receiving money is totally free and fast, and most payments can be deposited directly to your bank account in just a few
seconds. With cash app, you can also buy and sell bitcoin instantly, get a paycheck deposited right to the app, or create a unique $cashtag that you can share with anyone to get paid fast. You can even use the free cash card to spend the money
you keep in the app anywhere you like. Customize your card with a laser-etching and add a boost from the app to instantly save at some of your favorite places whenever you swipe.
<a href="http://www.cash.app/download">Download</a> cash app for free.
</p>
</div>
</div>
<div class="secondary-content t-border group">
<div class="article1">
<img src="Img/win.png" alt="100 Thieves wins at CWL London">
<h2>Big Win at CWL London</h2>
<p>100 Thieves won their first ever Call of Duty eSports title on May 5, 2019. After knocking out top teams like Envy, Team Heretics, and Team Reciprocity, and sweeping OpTic Gaming aside with ease, 100 Thieves was matched against eUnited. It was
a close fought affair all through the match, and with both teams mere seconds away from claiming victory, 100 Thieves managed to hold on to the point and won the final map 250-238.
<p><a href="https://www.gamesradar.com/cwl-london-2019-recap-winner/">Read more...</a></p>
</div>
<div class="article2">
<img src="Img/franchise.png" alt="100 Thieves gunning for the Los Angeles franchise">
<h2>Gunning the Los Angeles Franchise</h2>
<p>One of the most sought after spots in the competition is the Los Angeles franchise, and according to reports 100 Thieves are hoping to raise more money in the hopes of locking down the California position. If successful, it’s believed that 100
Thieves would be the sole team based in Los Angeles in the Call of Duty franchise league, an ideal situation as the team’s headquarters and LCS teams are both based in the city.</p>
<p><a href="https://www.dexerto.com/call-of-duty/100-thieves-reportedly-raising-25-million-for-call-of-duty-franchise-spot-675708">Read more...</a></p>
</div>
</div>
<div class="socialmedia">
<h3>Follow 100 Thieves</h3>
<a href="https://twitter.com/100Thieves"><i class="fab fa-twitter"></i></a>
<a href="http://instagram.com/100thieves"><i class="fab fa-instagram"></i></a>
<a href="https://www.youtube.com/100thieves"><i class="fab fa-youtube"></i></a>
<a href="https://www.twitch.tv/team/100thieves"><i class="fab fa-twitch"></i></a>
</div>
<div class="main-footer">
<footer>
© 100 Thieves, LLC 2019
</footer>
</div>
答案 2 :(得分：0)
步骤：
display: flex; justify-content: center;上设置header，以使徽标和导航容器并排并居中。display: flex; align-items: center; flex-wrap: wrap;上设置.main-nav ul，使所有li并排放置，并与徽标垂直居中。包裹使元素用完容器宽度时，它们可以移到下一行。
width: 40%;上的.main-nav ul做什么。保持原样，但链接在不同宽度的屏幕上的对齐方式显然不同。 flex: 1;会更适合占用容器上的所有剩余空间吗？width: 40%;的区别。display: flex; align-items: center;上设置.main-logo，以使徽标与导航链接垂直居中。还必须在display: block;上设置.main-logo img，以使图像尊重垂直对齐方式。header和.main-nav ul li a之间的其他与定位相关的样式。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
color: #fff;
font-family: 'Barlow', sans-serif;
}
header {
color: white;
background-color: black;
padding: 25px 0 25px 0;
display: flex;
justify-content: center;
}
/* Navigation */
.main-logo {
display: flex;
align-items: center;
}
.main-logo img {
display: block;
}
.main-nav {}
.main-nav ul {
width: 40%;
list-style: none;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.main-nav a {
color: #fff;
width: 100px;
padding: 0;
display: block;
text-decoration: none;
text-transform: uppercase;
text-align: center;
}
.main-nav li {
padding: 0;
}
/* Links */
a:hover {
color: #a8a8a8;
}
body a:visited {
color: #fff;
}
.intro-content {
padding-top: 170px;
height: 850px;
background: linear-gradient(red, transparent 90%), linear-gradient(0deg, #000, transparent), #ffa949 url('img/header-bg.jpg') no-repeat center;
background-size: cover;
}
.intro-content h1 {
color: white;
font-size: 3.25rem;
/* 26px/16px */
letter-spacing: .065em;
font-weight: 200;
padding: 75px 0 5px 0;
}
.main-content,
.intro-content,
.main-footer {
text-align: center;
}
.main-content {
padding-top: 25px;
padding-bottom: 95px;
}
.secondary-content {
text-align: center;
padding-top: 80px;
padding-bottom: 70px;
border-bottom: 2px solid #dfe2e6;
}
.socialmedia {
text-align: center;
margin: 50px 0 20px 0;
}
.socialmedia a {
margin: 0 25px 0 25px;
color: white;
font-size: 1.5rem;
}
.main-footer {
margin-bottom: 50px;
}
.t-border {
border-top: 2px solid #dfe2e6;
}
/* Layout */
.main-content,
.secondary-content {
width: 75%;
padding-left: 25px;
padding-right: 25px;
margin: auto;
max-width: 960px;
}
/* Floats */
.article1,
.article2 {
width: 40%;
}
.article2 {
float: left;
}
.article1 {
float: right;
}
/* Float Clearfix */
.group:after {
content: "";
display: table;
clear: both;
}<DOCTYPE! html>
<html lang="en-US" dir="ltr">
<head>
<meta name="viewport" content="width=device-width">
<meta charset="UTF-utf-8">
<title>100 Thieves | Home</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Barlow&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/ab11039b93.js"></script>
</head>
<body>
<header>
<div class="main-logo">
<a href="index.html"><img src="https://picsum.photos/200/50" alt="100 Thieves Logo"></a>
</div>
<div class="main-nav">
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Teams</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Careers</a></li>
</ul>
</nav>
</div>
</header>
<div class="intro-content">
<h1>Take What's Not Given</h1>
<p>The words of Matt "Nadeshot" Haag and the official 100 Thieves motto</p>
</div>
<div class="main-content">
<div class="about">
<h2>About 100 Thieves</h2>
<p>100 Thieves is a new gaming lifestyle company and eSports organization built at the intersection of competitive gaming, entertainment, and apparel. 100 Thieves was founded in 2017 by Matt "Nadeshot" Haag, the former Optic Gaming Call of Duty captain,
X Games gold medalist, and 2014 eSports athlete of the year. After retiring from competitive play, Matt went on to build some of the most popular gaming channels on twitch and youtube, and then founded 100 Thieves as a creative outlet for his
passions in competitive gaming, storytelling, and streetwear. The company currently competes in professional League of Legends, Call of Duty, Fortnite and Apex Legends.
</p>
</div>
<div class="cashapp">
<h2>About Cash App</h2>
<p>Cash App is the money app. It's the easiest way to pay people back—friends, family, coworkers—anyone, really. Sending and receiving money is totally free and fast, and most payments can be deposited directly to your bank account in just a few
seconds. With cash app, you can also buy and sell bitcoin instantly, get a paycheck deposited right to the app, or create a unique $cashtag that you can share with anyone to get paid fast. You can even use the free cash card to spend the money
you keep in the app anywhere you like. Customize your card with a laser-etching and add a boost from the app to instantly save at some of your favorite places whenever you swipe.
<a href="http://www.cash.app/download">Download</a> cash app for free.
</p>
</div>
</div>
<div class="secondary-content t-border group">
<div class="article1">
<img src="Img/win.png" alt="100 Thieves wins at CWL London">
<h2>Big Win at CWL London</h2>
<p>100 Thieves won their first ever Call of Duty eSports title on May 5, 2019. After knocking out top teams like Envy, Team Heretics, and Team Reciprocity, and sweeping OpTic Gaming aside with ease, 100 Thieves was matched against eUnited. It was
a close fought affair all through the match, and with both teams mere seconds away from claiming victory, 100 Thieves managed to hold on to the point and won the final map 250-238.
<p><a href="https://www.gamesradar.com/cwl-london-2019-recap-winner/">Read more...</a></p>
</div>
<div class="article2">
<img src="Img/franchise.png" alt="100 Thieves gunning for the Los Angeles franchise">
<h2>Gunning the Los Angeles Franchise</h2>
<p>One of the most sought after spots in the competition is the Los Angeles franchise, and according to reports 100 Thieves are hoping to raise more money in the hopes of locking down the California position. If successful, it’s believed that 100
Thieves would be the sole team based in Los Angeles in the Call of Duty franchise league, an ideal situation as the team’s headquarters and LCS teams are both based in the city.</p>
<p><a href="https://www.dexerto.com/call-of-duty/100-thieves-reportedly-raising-25-million-for-call-of-duty-franchise-spot-675708">Read more...</a></p>
</div>
</div>
<div class="socialmedia">
<h3>Follow 100 Thieves</h3>
<a href="https://twitter.com/100Thieves"><i class="fab fa-twitter"></i></a>
<a href="http://instagram.com/100thieves"><i class="fab fa-instagram"></i></a>
<a href="https://www.youtube.com/100thieves"><i class="fab fa-youtube"></i></a>
<a href="https://www.twitch.tv/team/100thieves"><i class="fab fa-twitch"></i></a>
</div>
<div class="main-footer">
<footer>
© 100 Thieves, LLC 2019
</footer>
</div>
</body>
</html>