Css 如何居中导航栏并将其放置在横幅图像底部的顶部

只是一个警告，我对HTML和CSS是新手。请耐心接受我的询问

我试图将导航栏居中，同时将其重叠在横幅的底部。我有一个在顶部的横幅图像和一个主要内容的背景图像，它位于导航栏的正下方。我已尝试添加以下内容：

ul.navbar li {
 float: left}

这使导航条直接漂浮在主体背景下方，而不是所有物体上方。为了以水平格式获取列表，我使用了

ul.navbar li {
 display: inline-table}

这是唯一的变化，将给我正确的水平格式，我正在寻找。现在我只需要它居中，并覆盖在我的旗帜图像的底端。有什么建议吗？我的HTML和CSS如下所示：

CSS:

HTML:

---

提前非常感谢

首先，您应该检查HTML结构–似乎缺少结束DIV标记，您应该删除列表元素周围的包装p元素

试试这个：

<div id="header">
<div class="wrap">
    <img src="banner.png"/>
</div>
<ul class="navbar">
    <li><a href="index.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="inspireme.html">Training</a></li>
</ul>
</div>

ul.navbar需要这样的东西：

 margin:0 auto; float:none; position:relative; top:-35px; width:500px;

您应该删除div#contentareamain1的相对位置以使代码正常工作

 div#contentareamain1 { (…) /*position: relative;*/ }

您应该真正访问并学习您的HTML:）

HTML

<div id="header">
    <img src="" />
    <ul class="navbar">
        <li><a href="#">Link text</a></li>
        <li><a href="#">Link text</a></li>
        <li><a href="#">Link text</a></li>
    </ul>
</div>
<div id="content-area>

</div>

您可以在上看到代码的作用，并对其进行操作。

---

希望它能对您有所帮助。

如果ul.navbar的宽度确实已知，那么这将起作用。如果没有，则边距为0自动；不会生效，因为其宽度默认为100%。

 margin:0 auto; float:none; position:relative; top:-35px; width:500px;

 div#contentareamain1 { (…) /*position: relative;*/ }

<div id="header">
    <img src="" />
    <ul class="navbar">
        <li><a href="#">Link text</a></li>
        <li><a href="#">Link text</a></li>
        <li><a href="#">Link text</a></li>
    </ul>
</div>
<div id="content-area>

</div>

#header {
    position:relative;
    z-index:1;
    text-align:center;
}
#header img {
    position:inherit;
    z-index:inherit;
}
#header ul.navbar {
    position:relative;
    z-index:2;
    margin:0 auto;
    top:-35px;
    list-style-type:none;
}
#header ul.navbar li {
    display:inline-block;
}
#header ul.navbar li a {
    display:block;
    padding:4px 8px;
    background-color:blue;
    color:white;
    text-decoration:none;
}