我需要帮助定位导航 Div

Question

我有一个非常具体的问题，我似乎无法解决。我正在尝试将徽标（锚标记内的 img 标记）定位到我的导航 div 左侧，并将其他三个链接定位在导航右侧 div。我还尝试在中间垂直对齐图像和链接（我试过 verticle-align）。这是代码：

body {
  min-width: 1200px;
}
a.nav {
  text-decoration: none;
  font-size: 18px;
}
#header {
  background-color: black;
}
#headtop {
  width: 1200px;
  margin: 0 auto;
  text-align: right;
}
#logo {
  width: 45px;
  height: 45px;
  border: 1px solid #00ffff;
  float: left;
}

<div id="header">
  <div id="headtop">
    <a href="index.html">
      <img src="logo.jpg" alt="Home" id="logo">
    </a>
    <a href="about.html" class="nav">About</a>
    <a href="gallery.html" class="nav">Gallery</a>
    <a href="contact.html" class="nav">Contact</a>
  </div>
</div>

所以首先，我设置了最小宽度，这样页面一达到设置的宽度就会折叠成滚动条。我希望 headtop 的高度约为 68px。但是当我设置高度时，我仍然无法垂直对齐文本或徽标。我尝试将 padding-top 添加到链接中，但它什么也没做。他们停留在页面顶部。我什至尝试为 headtop 设置内边距，这很有效，但是当我折叠页面时，有一段白色，因为出于某种原因 header 背景没有延伸到整个页面。为什么我的链接会卡在页面顶部，为什么我不能在不影响 headertop 宽度的情况下设置内边距？

非常感谢任何建议或帮助。

Answer 1

首先，像这样更改您的 HTML 以从导航容器中获取图像（我添加了一个图像用于显示目的）

<div id="header"> <a href="index.html">
        <img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/57/CBC_Logo_1966-1974.svg/618px-CBC_Logo_1966-1974.svg.png" alt="Home" id="logo" />
    </a>

    <div id="headtop"> <a href="about.html" class="nav">About</a>
 <a href="gallery.html" class="nav">Gallery</a>
 <a href="contact.html" class="nav">Contact</a>

    </div>
</div>

现在，像这样更改您的 CSS，这样您就可以垂直对齐项目并按需要显示所有元素：

body {
}
#headtop {
    text-decoration: none;
    font-size: 18px;
    position: absolute;
    top: 50%;
    right:20px;
    transform: translateY(-50%);
}
a {
    margin:0 20px;
    color:#fff
}
#header {
    background-color: black;
    position:relative;
    height:68px
}
#logo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
#logo {
    width: 45px;
    height: 45px;
    border: 1px solid #00ffff;
    position:relative
}

请注意，我删除了您拥有的 min-width（但您可以根据需要添加）。除此之外，我只是在 header 中添加了 position:relative 属性，然后将 transform property 用于要垂直对齐的项目。

我做了一个jsfiddle所以你可以玩一下

我需要帮助定位导航 Div

I Need Help Positioning A Navigation Div

html

position