Question

对于上帝的爱，我不能让它适当地居中。我尝试了很多东西，但它不会以导航栏为中心。如果有人能指出我如何集中它的方向，请做。我的底部徽标（恰好是vault_logo）很好，但同样的技术似乎与使用的徽标一起工作。

＆＃13;

.logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: -10px;
	border-style: solid;
	border-color: rgb(245, 196, 98);
	border-radius: 10px;
}

body {
	background-color: rgb(18, 16, 20);
}

ul {
	
    list-style-type: none;
    margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
    padding: 0;
    overflow: hidden;
    background-color: rgb(18, 16, 20);
	overflow: hidden;
}

li {
    float: left;
	display: block;
}

li a {
	font-family: Oswald-Regular;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 214px;
    text-decoration: none;
	border-style: solid;
	border-color: rgb(245, 196, 98);
	border-width: 0.15px;
	font-size: 1.14em;
}

li a:hover {
	background-color: rgb(245, 196, 98);
}

li a:active {
	background-color: rgb(245, 196, 98);
}

.intro {
	font-size: 2em;
	text-align: center;
	color: white;
	border-style: solid;
	border-radius: 5px;
	border-color: rgb(245, 196, 98);
	padding: 2px;
}

.info {
	border-style: solid;
	border-color: rgb(245, 196, 98);
}

.info_title {
	color: white;
	font-family: Oswald-Regular;
	border-style: solid;
	border-color: rgb(245, 196, 98);
	display: inline;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
	border-radius: 0px 0px 30px;
}

.info_sub {
	color: white;
	font-family: Oswald-Regular;
	text-align: center;
	text-decoration: underline;
	text-decoration-color: rgb(245, 196, 98);

}

.info_p {
	color: white;
	font-family: Oswald-Regular;
	font-size: 1.3em;
	padding-left: 10px;
	padding-right: 10px;
}
.vault_logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 45%;

}


footer {
	color: white;
	font-size: 2em;
	text-align: center;
}

@font-face {
    font-family: Oswald-Regular;
    src: url(Oswald-Regular.ttf);

＆＃13;

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Team Nectar</title>
  <link rel="stylesheet" href="home_styles.css">
</head>

<body>
<div>

<img class="logo" src="NTR_Logo.jpeg" alt="Smiley face" height="200" width="200">

</div>



<ul class="nav">
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">Teams</a></li>
  <li><a href="contact.asp">Staff</a></li>
  <li><a href="about.asp">Contact Us</a></li>
</ul>
<div class="info">
<h1 class="info_title"> Welcome to Team Nectar! </h1> <br>
<h2 class="info_sub"> We are a competitive E-Sports Organization with teams competing in Rocket League, Counter-Strike Global Offensive, Team Fortress 2 and Overwatch.</h2> 
<p class="info_p"> 		Team Nectar was found by Brian "ppaleun" Lee-Kwong in the Summer of 2015, and 
has been growing steadily since then. After forming their first Team Fortress 2 team, the team set its sights on lading in the top 3 during Season 19 of the 6v6 UGC League championships in the fall of 2015. The team not only landed in the top 3 during playoffs, but manage to take first place. After their victory, Team Nectars started a team in UGC Leagues Highlander and 4-versus-4 divisions. 
Shortly after this, the organization became a reality, and in just 2 short years, operates 9 different teams in over 6 different leauges across North American and Europe, with over 40+ players bearing the Team Nectar name. 
Currently, Team Nectar holds 7 First place titles and 13 top finalist titles in their respective leagues. </p>
</div>

<div class="sponsors">
	<h2 class="info_sub"> Proudly sponsored by</h2>
	<img src="vault_logo.png" class="vault_logo" height="220">
</div>
</body>
</html>

＆＃13;

PS：徽标位于页面顶部的黄色边框内。

使用导航栏（HTML / CSS）居中徽标

0 个答案: