Question

我正在尝试构建一个导航栏，该导航栏的徽标/图像位于顶部居中，其下方的导航菜单也位于居中位置。目前，我的导航链接不在右侧的中心。如何获得这些导航链接居中标题第二行的内容？

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

到目前为止，我似乎无法弄清楚自己做错了什么，这可能是我过去想过的简单事情。

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;。在一侧增加边距只会使其不对称。

如何使导航栏完美居中，徽标/图像位于顶部居中

1 个答案: