使导航栏居中
我正在为自己开发一个网站，但我不知道如何使导航栏在网站中居中。
我想也许其他人有一个想法:)整个导航栏稍微偏左&我不知道如何解决它..希望你们能做到这一点:)我是一个初学者@编码&我还有很多东西要学..
感谢您的帮助 ：）
网页：
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="sets.html">Sets</a></li>
<li><a href="about.html">About</a></li>
<li class="logo"><a href="index.html">SueZ Logo</a></li>
<li><a href="gigs.html">Gigs</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<section class="features">
<figure>
<img src="" alt="trololololol">
<figcaption>Fresh Baked Techno</figcaption>
</figure>
<figure>
<img src="" alt="lalala">
<figcaption>?</figcaption>
</figure>
<figure>
<img src="" alt="Bla bli blub">
<figcaption>?</figcaption>
</figure>
</section>
<footer>Copyright © 2020 SueZ</footer>
</body>
</html>
HUX布斯1回答
-
largeQ
我在这里制作了一个片段来解决您的问题。核实。希望能帮助到你。更新的 CSS 标记为/*----------*/...............................................................................给您的提示不要使用height.body { background: rgb(58, 58, 58); color: rgb(174, 62, 50); font-family: Helvetica Neue, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }/*------------------------*/ header { background-color: black; background-image: url("Fotos/background-warehouse.jpg"); background-size: 100%; background-position: center; /*height: 150px;*/ padding: 40px; text-align: center; position:relative; } .logo{width:100px;position:absolute; left:0; right:0; margin: 0 auto; top:0; z-index:10;} .logo img{width:100%;} /*------------------------*/ header a { color: rgb(174, 62, 50); text-decoration: none; text-transform: uppercase; margin-top: 60px; } nav ul { margin: 0; padding: 0; list-style-type: none; } nav li { display: inline-block; margin-right: 20px; } /*------------------------*/ nav li:last-child{margin-right:0} nav li:nth-child(2){margin-right:120px} /*------------------------*/ .features { background: white; color: gray; padding: 20px; display: flex; flex-direction: row; } .features figure { margin: auto; text-align: center; text-transform: uppercase; width: 200px; } .features figure img { border: 1px solid white; border-radius: 50%; box-shadow: gray 0 0 10px; width: 200px; } footer { background: black; color: gray; font-size: 12px; padding: 20px 20px; text-align: center; }<!DOCTYPE html><html><head> <title>Meine Seite!</title> <link rel="stylesheet" href="styles.css"></head><body> <header> <div class="logo"> <a href="#!"><img src="https://i.stack.imgur.com/yfW19.png" alt="logo"></a> </div> <nav> <ul> <li><a href="sets.html">Sets</a></li> <li><a href="about.html">About</a></li> <li><a href="gigs.html">Gigs</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <section class="features"> <figure> <img src="" alt="trololololol"> <figcaption>Fresh Baked Techno</figcaption> </figure> <figure> <img src="" alt="lalala"> <figcaption>?</figcaption> </figure> <figure> <img src="" alt="Bla bli blub"> <figcaption>?</figcaption> </figure> </section> <footer> Copyright © 2020 SueZ </footer>
随时随地看视频慕课网APP
相关分类
Html5
