我已经尝试了一段时间了。
希望有人可以帮助我解决这个问题，我不了解stackoverflow代码的工作原理，因此将其放入pastebin中。 （可能会很乱...）
body {
background-color: white;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.nav{
border: 1px solid white;
background-color: white;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
}
.box {
height:250px;
background-color:#7289da;
}
.boxed {
height:500px;
background-color:#314381;
}
li {
line-height: 1.7em;
display:block;
margin-left: auto;
text-align: center;
}
.footer-distributed{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: normal 16px sans-serif;
padding: 45px 50px;
margin-top: 80px;
}
.footer-distributed .footer-left p{
color: #8f9296;
font-size: 14px;
margin: 0;
}
/* Footer links */
.footer-distributed p.footer-links{
font-size:18px;
font-weight: bold;
color: #ffffff;
margin: 0 0 10px;
padding: 0;
}
.footer-distributed p.footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-right{
float: right;
margin-top: 6px;
max-width: 180px;
}
.footer-distributed .footer-right a{
display: inline-block;
width: 35px;
height: 35px;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-left: 3px;
}
.button {
border-color:aliceblue;
background-color:transparent;
border-radius: 2px;
border: 1px solid white;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 260px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.bottom-bar {
position:relative;
text-align:center;
font-size:.8em;
text-transform:uppercase;
background-color: rgb(23, 23, 23);
padding:15px 0;
}<head>
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<style>
.parallax {
/* The image used */
background-image: url("images/img.jpg");
/* Set a specific height */
min-height: 850px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .5);
}
* {
box-sizing: border-box;
}
</style>
</head>
<body><br>
<center><a href="/index.html"><img src="images/logo1.png"></a></center>
<ul class="nav">
<li><a href="index.html" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-blue w3-hover-text-blue">Home</a></li>
<li><a href="servers" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-blue w3-hover-text-blue">Servers</a></li>
<li><a href="https://discord.gg/aYyYPWh" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-blue w3-hover-text-blue">Discord</a></li>
<li><a href="https://arkinator.freshdesk.com/support/home" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-blue w3-hover-text-blue">Help Desk</a></li>
<li><a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-blue w3-hover-text-blue">Vote</a></li>
</ul>
<div class="parallax" style="color:white;font-family:Trebuchet MS, sans-serif;font-size:50px;text-align:center;"><br><br><br><br><br><b>WELCOME TO ARKINATOR</b><br>
<center>
<font style="font-size:20px;display:flex;justify-content: center;"><i>Spears? Check. Bows? Check. Dinos? Check.</i></font>
</center>
</div>
<div class="box">
<br><br>
<center>
<font style="color:white;font-size:30px;font-family:Trebuchet MS, sans-serif;"><b>Join Our Discord</b></font>
</center>
<center><button class="button"><span><a href="https://discord.gg/aYyYPWh" style="text-decoration:none">Open Discord</a></span></button></center>
</div>
<div class="boxed">
<br><br>
<center>
<font style="color:white;font-size:30px;font-family:Trebuchet MS, sans-serif;"><b>Want to support ARKinator?</b></font>
</center>
<center>
<font style="color:white;font-size:25px;font-family:Trebuchet MS, sans-serif;">Benefits from supporting</font>
</center>
<ul style="list-style-type:none;">
<li><span class="fas fa-check-circle" style="color:white;"></span>
<font style="color:white;font-size:20px;font-family:Trebuchet MS, sans-serif;">Discord Donator Rank</font>
</li>
<li><span class="fas fa-check-circle" style="color:white;"></span>
<font style="color:white;font-size:20px;font-family:Trebuchet MS, sans-serif;">Donator Channel & Room Access</font>
</li>
<li><span class="fas fa-check-circle" style="color:white;"></span>
<font style="color:white;font-size:20px;font-family:Trebuchet MS, sans-serif;">Our Appreciation</font>
</li>
</ul>
<br><br>
<font color="white">
<center>
Disclaimer: Please note that this is to help us support the server costs. Donating to ARKinator is greatly appreciated however once donated. Non-refundable purchase.
</center>
</font>
<br><br>
<center><button class="button"><span><a href="paypal.me/gamingasylum038" style="text-decoration:none">PayPal</a></span></button></center>
</div>
<div class="bottom-bar" style="color:white;">
Copyright 2018 © ARKinator | All Rights Reserved.
</div>
</body>
所以我想做的就是尝试使我的ul代码将其中的所有内容居中，而我的li则要保持对齐状态，这样一整行就很好了。
答案 0 :(得分：0)
我不知道您使用的是哪种布局。但这是您的问题的修补程序。
我向您ul添加了一个类，修改了您的li样式，并向ul添加了一些样式。
希望这会有所帮助
body {
background-color: white;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.nav{
border: 1px solid white;
background-color: white;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
}
.box {
height:250px;
background-color:#7289da;
}
.boxed {
height:500px;
background-color:#314381;
}
.footer-distributed{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: normal 16px sans-serif;
padding: 45px 50px;
margin-top: 80px;
}
.footer-distributed .footer-left p{
color: #8f9296;
font-size: 14px;
margin: 0;
}
/* Footer links */
.footer-distributed p.footer-links{
font-size:18px;
font-weight: bold;
color: #ffffff;
margin: 0 0 10px;
padding: 0;
}
.footer-distributed p.footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-right{
float: right;
margin-top: 6px;
max-width: 180px;
}
.footer-distributed .footer-right a{
display: inline-block;
width: 35px;
height: 35px;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-left: 3px;
}
.button {
border-color:aliceblue;
background-color:transparent;
border-radius: 2px;
border: 1px solid white;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 260px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.bottom-bar {
position:relative;
text-align:center;
font-size:.8em;
text-transform:uppercase;
background-color: rgb(23, 23, 23);
padding:15px 0;
}
.list-center{
list-style-type: none;
display: table;
margin: 10px auto;
}
li {
line-height: 1.7em;
display:block;
margin-left: auto;
}
<head>
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<style>
.parallax {
/* The image used */
background-image: url("images/img.jpg");
/* Set a specific height */
min-height: 850px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .5);
}
* {
box-sizing: border-box;
}
</style>
</head>
<body><br>
<center><a href="/index.html"><img src="images/logo1.png"></a></center>
<ul class="nav">
<li><a href="index.html" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-blue w3-hover-text-blue">Home</a></li>
<li><a href="servers" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-blue w3-hover-text-blue">Servers</a></li>
<li><a href="https://discord.gg/aYyYPWh" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-blue w3-hover-text-blue">Discord</a></li>
<li><a href="https://arkinator.freshdesk.com/support/home" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-blue w3-hover-text-blue">Help Desk</a></li>
<li><a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-blue w3-hover-text-blue">Vote</a></li>
</ul>
<div class="parallax" style="color:white;font-family:Trebuchet MS, sans-serif;font-size:50px;text-align:center;"><br><br><br><br><br><b>WELCOME TO ARKINATOR</b><br>
<center>
<font style="font-size:20px;display:flex;justify-content: center;"><i>Spears? Check. Bows? Check. Dinos? Check.</i></font>
</center>
</div>
<div class="box">
<br><br>
<center>
<font style="color:white;font-size:30px;font-family:Trebuchet MS, sans-serif;"><b>Join Our Discord</b></font>
</center>
<center><button class="button"><span><a href="https://discord.gg/aYyYPWh" style="text-decoration:none">Open Discord</a></span></button></center>
</div>
<div class="boxed">
<br><br>
<center>
<font style="color:white;font-size:30px;font-family:Trebuchet MS, sans-serif;"><b>Want to support ARKinator?</b></font>
</center>
<center>
<font style="color:white;font-size:25px;font-family:Trebuchet MS, sans-serif;">Benefits from supporting</font>
</center>
<ul style="list-style-type:none;" class="list-center">
<li><span class="fas fa-check-circle" style="color:white;"></span>
<font style="color:white;font-size:20px;font-family:Trebuchet MS, sans-serif;">Discord Donator Rank</font>
</li>
<li><span class="fas fa-check-circle" style="color:white;"></span>
<font style="color:white;font-size:20px;font-family:Trebuchet MS, sans-serif;">Donator Channel & Room Access</font>
</li>
<li><span class="fas fa-check-circle" style="color:white;"></span>
<font style="color:white;font-size:20px;font-family:Trebuchet MS, sans-serif;">Our Appreciation</font>
</li>
</ul>
<br><br>
<font color="white">
<center>
Disclaimer: Please note that this is to help us support the server costs. Donating to ARKinator is greatly appreciated however once donated. Non-refundable purchase.
</center>
</font>
<br><br>
<center><button class="button"><span><a href="paypal.me/gamingasylum038" style="text-decoration:none">PayPal</a></span></button></center>
</div>
<div class="bottom-bar" style="color:white;">
Copyright 2018 © ARKinator | All Rights Reserved.
</div>
</body>