我怎样才能让我的导航栏完美居中， logo/image 居中于顶部

Question

我正在尝试构建一个导航栏，该导航栏的 logo/image 居中位于顶部，导航菜单位于其下方，也居中。目前，我的导航链接偏离中心，稍微偏右。如何让这些导航链接以 header 中的第二行为中心？

我尝试在 nav ul {} 和 nav li {} 下使用 position: relative;，但没有任何变化。

我似乎无法弄清楚到目前为止我做错了什么，这可能是我正在寻找的简单问题。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>House of Vibe Productions</title> 
            <!-- title appears in browser tab -->
        <link href="stylesheet.css" rel="stylesheet" type="text/css">
            <!-- linking to stylsheet.css file for styling --> 
        <link href="photos/favicon.png" rel="icon" type="image/gif" sizes="16x16">
            <!-- linking to the favicon -->
        <meta charset="UTF-8"> 
            <!-- UTF-8 is the default character set for HTML5 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <!-- viewport gives browser instructions on how to control the page's dimensions and scaling -->
            <!-- width=device-width sets the width of the page to follow the screen-width of the device --->
            <!-- 1.0 scale sets the initial zoon level when the page is first loaded by the browser -->
        <meta name="robots" content="index, follow">
            <!-- allows the spider of a search engine to index the whole website -->
        <meta name="keywords" content="house of vibe, production, music, studio, artist, artists, los angeles, ">
        <meta name="description" content="House of Vibe Productions">
            <!-- Use no more than 200 characters. This is the description that appears in the search results on search engines -->
        <meta name="author" content="Jacki Leigh Designs">
    </head>
    <body>
    <div id=wrapper>


    <header>
        <div class="container">

            <div class="headerLogo">
            <a href="index.html">
            <img src="https://via.placeholder.com/200x50?text=HOV+Productions+Logo+Placeholder" alt="HOV Productions Logo" class="headerLogoImg">
            </a>
            </div>

            <nav>
                <ul class="nav-links">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Work</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>

        </div>
    </header>    

    <br />

    <div class="mainImg">    
        <img src="https://via.placeholder.com/300x100?text=HOV+Image+Placeholder" alt="Main Image" class="mainImgIndex">  
    </div> 

    <br />
    <br />  

    <footer>
        <small>copyright &copy; <script type="text/javascript">document.write(new Date().getFullYear());</script> House of Vibe Productions</small>
        </style>
    </footer>

    <br />

    </div>
    </body>
</html>

CSS:

body {
    margin: 0;
    background-color: #B73114;
    font-family: sans-serif;
    font-weight: 300;
    font-style: normal;
}

#wrapper { /* site wrapper div */

}

header {
    background-color: #FDEEFD;
    width: 100%;
}

.container { /* container div for header (nav bar) */
    text-align: center;
    display: block;
}

.headerLogo {

}

.headerLogoImg {
    display: block;
    text-align: center;
    margin: 0 auto;
    padding: 8px;
}

nav {
    text-transform: uppercase;
    padding: 4px;
}

nav ul {
    margin: 0;
    padding: 2px;
    list-style: none;
    text-align: center;
}

a {
    text-decoration: none;
}

nav li {
    display: inline-block; /* places list horizontal, not vertical */
    margin-left: 30px; /* specifies the space between the list items */
    font-size: 15px;
}

.nav-links { /* navigation links */

}

.mainImg { /* main image div on index page */
    text-align: center;
}

footer {
    text-align: center;
}

Answer 1

将 margin-left: 30px; 更改为 margin: 0px 15px;。在一侧添加边距只会使其不对称。

我怎样才能让我的导航栏完美居中， logo/image 居中于顶部

How can I get my navbar centered perfectly with a logo/image centered on top

html

css

center

nav

navbar