Question

我目前正在为uni设计论文编写一个网站。我差不多完成了，但导航栏的中心对齐有问题。

它没有像文本和图像内容那样对齐页面中心，它在右边略微过远。如下图所示：

有人可以帮我解决这个问题吗？

编辑：如果有人也可以帮助我为导航栏的图标部分创建非常棒的锚点 - 我不知道在{/ 1}}

上使用<a name=#home>部分的内容

这是HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>S Gard</title>
        <link rel="stylesheet" type="text/css" href="stylesheet2.css" />
        <link rel="icon" type="image/png" href="favicon.ico" />

    </head>
    <body style="position:absolute; height:100%;">
    <br />
        <header>
            <nav>
                <ul>
                    <li><a href="#about"><h2>ABOUT ME</h2></a></li>
                    <li><a href="#home"><img src="ICON.jpg" width="60%" height="60%"></a></li>
                    <li><a href="#portfolio"><h2>PORTFOLIO</h2></a></li>
                </ul>
            </nav>
        </header>
        <br /><br /><br /><br /><br /> <br />
        <div class="section1">
            <div class="center">
                <a name="#home"><img src="mainImage2.jpg" width="55%" height="55%" ></a>
                <br /><br />
                <div class="scroll">
                    <a href="#about"><img src="scrollArrow.png" width="5%" height="5%"></a>
                </div>
            </div>
        </div>
        <br />
        <div class="about">
            <a name="about"><br /><br /><br /><br /><br /><br /><br /></a>
            <h2>ABOUT ME</h2>
            <p class="para">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et nibh vel erat efficitur egestas. Nullam ac urna id arcu posuere egestas. Praesent est magna, fringilla nec bibendum et, pellentesque eu mi. Nulla quis volutpat nisi, bibendum vulputate nisl. Donec porta odio eget velit dignissim vulputate. Nulla vitae sodales quam. Phasellus vulputate purus eu purus lobortis commodo.
Nulla pulvinar arcu a tempus maximus. Vestibulum eleifend, augue vel iaculis interdum, nisi ante lacinia tortor, ac porttitor nunc turpis eu ante. Aliquam et nisl et ex rhoncus vulputate sit amet eu dolor. Nunc risus elit, pulvinar nec sapien id, tincidunt dictum diam. Vestibulum gravida a metus non vehicula. Pellentesque in euismod dui, id consectetur nulla. Nunc libero ligula, pretium id orci et, pellentesque vestibulum dolor.
            </p>
            <div class="scroll">
                    <a href="#portfolio"><img src="scrollArrow.png" width="5%" height="5%"></a>
                </div>
        </div>
        <div class="portfolio">
            <a name="portfolio"><br /><br /><br /><br /><br /><br /><br /></a>
            <h2>PORTFOLIO</h2>
            <p class="para">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et nibh vel erat efficitur egestas. Nullam ac urna id arcu posuere egestas. Praesent est magna, fringilla nec bibendum et, pellentesque eu mi. Nulla quis volutpat nisi, bibendum vulputate nisl. Donec porta odio eget velit dignissim vulputate. Nulla vitae sodales quam. Phasellus vulputate purus eu purus lobortis commodo.
Nulla pulvinar arcu a tempus maximus. Vestibulum eleifend, augue vel iaculis interdum, nisi ante lacinia tortor, ac porttitor nunc turpis eu ante. Aliquam et nisl et ex rhoncus vulputate sit amet eu dolor. Nunc risus elit, pulvinar nec sapien id, tincidunt dictum diam. Vestibulum gravida a metus non vehicula. Pellentesque in euismod dui, id consectetur nulla. Nunc libero ligula, pretium id orci et, pellentesque vestibulum dolor.
            </p>
        </div>
    </body>
</html>

CSS：

html{
    background-color: white;
}

h1 {
    color: black;
    /*opacity: 0.7;*/
    font-weight: 300;
    font-family: 'Lato', sans-serif;
}

h2 {
    color: black;
    /*opacity: 0.7;*/
    font-weight: 300;
    font-family: 'Lato', sans-serif;
}

header{
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    text-align: center;
}

header nav ul {
    background-color: rgb(255, 255, 255);
    text-align: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

header nav ul li {
    display: inline-block;
    text-align: center;
}

header nav a:link, a:visited {
    display: block;
    width: 200px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

header img{
    vertical-align: middle;
}

header nav a:hover, a:active {
    opacity: 0.4;
}

.section1{
    width: 100%;
    height: 100%;
    position:relative;
}

.center{
    text-align: center;
}

.scroll a:hover, a:active {
    opacity: 0.4;
}

div.about{
    position:relative;
    text-align: center;
    width: 100%;
    height: 100%;
}

p.para{

    text-align: center;
    width:100%;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}

div.portfolio{
    position: relative;
    text-align: center;
    width: 100%;
    height: 100%;
}

Answer 1

Css：

<style>
    #nav{
        border:1px solid #ccc;
        border-width:1px 0;
        list-style:none;
        margin:0;
        padding:0;
        text-align:center;
    }
    #nav li{
        display:inline;
    }
    #nav a{
         display:inline-block;
         padding:10px;
    }
</style>

Answer 2

尝试添加

html,body{

    margin:0;padding:0;
}

Demo here

导航栏不居中

2 个答案: