我需要帮助定位导航 div

Question

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

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>

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

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

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
}

请注意，我取消了您的最小宽度（但您可以根据需要添加）。除此之外，我只是在标题中添加了position:relative 属性，然后将transform property 用于要垂直对齐的项目。

我做了一个jsfiddle，所以你可以玩弄它