CSS 帮助：导航栏位置：固定； 我也需要居中

Question

班级项目：

试图“锚定”我的导航栏，使其停留在屏幕顶部。

HTML

<nav><a href="index.html"><img src="images/home.jpg" alt="Home" width="120"
height="60" title="Home"></a> <a href="services.html"><img            src="images/services.jpg" alt="Services" width="120"
height="60" title="Services"></a> <a href="training.html"><img    src="images/training.jpg" alt="Training" width="120"
 height="60" title="Training"></a> <a href="about.html"><img      src="images/about.jpg" alt="About" width="120"
height="60" title="About"></a> <a href="media.html"><img src="images/media.jpg" alt="Media" width="120"
height="60" title="Media"></a> <a href="faq.html"><img src="images/faq.jpg"       alt="F.A.Q." width="120"
height="60" title="FAQ"></a> <a href="contact.html"><img   src="images/contact.jpg" alt="Contact" width="120"
height="60" title="Contact"></a></nav>

CSS导航{位置：固定； }

我会发布一个屏幕截图，这是我的第一篇文章，没有代表。

Answer 1

您可以使用display:inline-block和text-align:center的组合使固定定位的nav居中。

看小提琴

HTML

<nav>
    <div> 
        <a href="#">HTML</a>
        <a href="#">CSS</a>  
        <a href="#">JavaScript</a>
        <a href="#">jQuery</a>
    </div>
</nav>

和 CSS

nav a {
    float:left;
}
nav {
    width:100%;
    position:fixed;
    text-align: center;
}
nav div {
    display: inline-block;
}