猿问

使导航栏居中

我正在为自己开发一个网站，但我不知道如何使导航栏在网站中居中。

我想也许其他人有一个想法:)整个导航栏稍微偏左&我不知道如何解决它..希望你们能做到这一点:)我是一个初学者@编码&我还有很多东西要学..

页面截图

标识

感谢您的帮助 ：）

网页：

<!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 &copy; 2020 SueZ</footer>

    </body>


</html>


HUX布斯
浏览 122回答 1
1回答

largeQ

我在这里制作了一个片段来解决您的问题。核实。希望能帮助到你。更新的 CSS 标记为/*----------*/...............................................................................给您的提示不要使用height.body {&nbsp; &nbsp; background: rgb(58, 58, 58);&nbsp; &nbsp; color: rgb(174, 62, 50);&nbsp; &nbsp; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; }/*------------------------*/&nbsp; header {&nbsp; &nbsp; background-color: black;&nbsp; &nbsp; background-image: url("Fotos/background-warehouse.jpg");&nbsp; &nbsp; background-size: 100%;&nbsp; &nbsp; background-position: center;&nbsp; &nbsp; /*height: 150px;*/&nbsp; &nbsp; padding: 40px;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; position:relative;&nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; .logo{width:100px;position:absolute; left:0; right:0; margin: 0 auto; top:0; z-index:10;}&nbsp; &nbsp; .logo img{width:100%;}&nbsp; &nbsp;&nbsp;&nbsp;/*------------------------*/&nbsp; header a {&nbsp; &nbsp; color: rgb(174, 62, 50);&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; text-transform: uppercase;&nbsp; &nbsp; margin-top: 60px;&nbsp; &nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; nav ul {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; list-style-type: none;&nbsp; }&nbsp; nav li {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; margin-right: 20px;&nbsp; }&nbsp; /*------------------------*/&nbsp; nav li:last-child{margin-right:0}&nbsp; nav li:nth-child(2){margin-right:120px}&nbsp;&nbsp;&nbsp; /*------------------------*/&nbsp; .features {&nbsp; &nbsp; background: white;&nbsp; &nbsp; color: gray;&nbsp; &nbsp; padding: 20px;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: row;&nbsp; }&nbsp; .features figure {&nbsp; &nbsp; margin: auto;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; text-transform: uppercase;&nbsp; &nbsp; width: 200px;&nbsp; }&nbsp; .features figure img {&nbsp; &nbsp; border: 1px solid white;&nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; box-shadow: gray 0 0 10px;&nbsp; &nbsp; width: 200px;&nbsp; }&nbsp; footer {&nbsp; &nbsp; background: black;&nbsp; &nbsp; color: gray;&nbsp; &nbsp; font-size: 12px;&nbsp; &nbsp; padding: 20px 20px;&nbsp; &nbsp; text-align: center;&nbsp; }<!DOCTYPE html><html><head>&nbsp; &nbsp; <title>Meine Seite!</title>&nbsp; &nbsp; <link rel="stylesheet" href="styles.css"></head><body>&nbsp; &nbsp; <header>&nbsp; &nbsp; &nbsp; &nbsp; <div class="logo">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#!"><img src="https://i.stack.imgur.com/yfW19.png" alt="logo"></a>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <nav>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="sets.html">Sets</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="about.html">About</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="gigs.html">Gigs</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="contact.html">Contact</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; &nbsp; </header>&nbsp; &nbsp; &nbsp; <section class="features">&nbsp; &nbsp; &nbsp; &nbsp; <figure>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="" alt="trololololol">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <figcaption>Fresh Baked Techno</figcaption>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </figure>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <figure>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="" alt="lalala">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <figcaption>?</figcaption>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </figure>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <figure>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="" alt="Bla bli blub">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <figcaption>?</figcaption>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </figure>&nbsp; &nbsp; &nbsp; </section>&nbsp; &nbsp; &nbsp; <footer>&nbsp; &nbsp; &nbsp; &nbsp; Copyright &copy; 2020 SueZ&nbsp; &nbsp; &nbsp; </footer>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答