如何让 header 与页面中央的导航栏对齐？

Question

我对 HTML 和 CSS 很陌生。我试图将两个 objects - 我的 header 图片和我的导航

居中

这是我的headerCSS

div #header-img {
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
        margin-top: -30px;
        padding: 0 0 0 0;
    }

这是我的headerhtml代码

<div id="header-img">
    <img src="http://metaphorcontrol.com/solewebsite/wp-content/uploads/2012/07/SoleHeaders1.jpg">
    </div>

我想知道如何将它与下面 html 代码中的以下项目对齐。

<div>
        <nav><ul>
            <li style="background-color: #99042A;"><a href="/food-wine.html">Fine Foods</a></li>
            <li style="background-color: #585123;"><a href="/wine-cellar.html">Wine & Cellar</a></li>
            <li style="background-color: #2E0219;"><a href="/kitchenware.html">Kitchenware</a></li>
            <li style="background-color: #211103;"><a href="/our-philosophy.html">Our Philosophy</a></li>
            <li style="background-color: #DBCCC5;"><a href="/register.html">Register</a>|<a href="/login.html">Log-In</a></li>
        </ul></nav>
    </div>

与以下CSS

    nav ul {
        list-style-type: none;
        overflow: visible;
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
        margin-top: -4px;
            }

        nav li {
            float: left;
            width: 204px;
            height: 80px;
            overflow: hidden; 
            white-space: nowrap;
            }

我的语法哪里出错了，以后我应该记住什么来确保我想要的所有行为都是正确的。

提前致谢！

Answer 1

尝试将 position:relative 添加到两个

 div #header-img {
            position:relative;
            display: inline-block;
            margin-left: auto;
            margin-right: auto;
            margin-top: -30px;
            padding: 0 0 0 0;
        }

Answer 2

然后访问#header-img div "directly"我猜你的目的是这样做？

div#header-img { /* CSS HERE */ }

...不是

div #header-img { /* CSS HERE */ }

可能无论如何都可以工作，因为您的站点可能至少被一个 div 包围，不过 :) 但不同之处在于：

div#header-img = ID 为 header-img

的 div

div #header-img = 在 div 中带有 ID header-img 的元素（实际上是 div） ...

你做出选择，简单！ :)

Answer 3

你可能想看看bootstrap...它似乎正在迅速成为基础设计的标准。

它带有响应式和预样式类。 bootstrap 提供的导航栏可以很容易地满足您的需要。

Here 是 bootstrap 是什么以及下载的基本大纲。

Here 是完整教程。

Answer 4

现在您的导航栏上有内边距，而图像上没有。它正在将它推到一边，导致它不像图像那样向左对齐。

nav ul {
  padding:0;
    list-style-type: none;
    overflow: visible;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-top: -4px;
        }

将填充添加到顶部，它们将对齐。您可以使用 position: 并创建一个具有设置宽度的外部 div 来包含元素，并将边距设置为自动，它们也应该在其中正确居中。

Answer 5

您必须在页眉和导航中指定宽度，关于页眉-img，display:block 而不是内联块

   body{width:100%;}
#wrapper{width:1024px;
   margin-left: auto;
    margin-right: auto;}
   
nav ul {
    list-style-type: none;
    position:relative;
    display: inline-block;
    margin: 0!important;
    padding:0!important;
     
        }

    nav li {
        float:left;
      text-align:center;
        width: 204px;
        height: 80px;
        overflow: hidden; 
        white-space: nowrap;
        }

   #header-img {
   
 display:block;
    margin-top: -30px;
    padding: 0 0 0 0;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="wrapper">
  <div id="header-img">
<img src="http://metaphorcontrol.com/solewebsite/wp-content/uploads/2012/07/SoleHeaders1.jpg">
</div>
<div>
    <nav><ul>
        <li style="background-color: #99042A;"><a href="/food-wine.html">Fine Foods</a></li>
        <li style="background-color: #585123;"><a href="/wine-cellar.html">Wine & Cellar</a></li>
        <li style="background-color: #2E0219;"><a href="/kitchenware.html">Kitchenware</a></li>
        <li style="background-color: #211103;"><a href="/our-philosophy.html">Our Philosophy</a></li>
        <li style="background-color: #DBCCC5;"><a href="/register.html">Register</a>|<a href="/login.html">Log-In</a></li>
    </ul></nav>
</div>  
  </div>
</body>
</html>

如何让 header 与页面中央的导航栏对齐？

How do I get my header to align with my navigation bar at the center of my page?

html

css

alignment

centering