Question

我有一个非常具体的问题，我似乎无法解决。我试图在导航div的左侧和导航div右侧的其他三个链接上放置一个徽标（img标签在锚标签内）。我也试图在中间垂直对齐图像和链接（我尝试过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>

首先，我设置了最小宽度，以便页面一旦达到设置宽度就会折叠到滚动条中。我希望顶部的高度约为68px。但是当我设置高度时，我仍然无法垂直对齐文字或徽标。我尝试在链接中添加padding-top，但它什么也没做。它们一直停留在页面顶部。我甚至尝试设置顶部的填充，这是有效的，但是当我折叠页面时，有一段白色，因为由于某种原因，标题背景没有延伸到整个页面。为什么我的链接卡在页面顶部，为什么我不能在不影响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
}

请注意，我取下了你所拥有的最小宽度（但如果你愿意，你可以添加它）。除此之外，我只是在标题中添加了position:relative属性，然后将transform property用于您想要垂直对齐的项目。

我制作了jsfiddle所以你可以玩它

我需要帮助定位导航部门

1 个答案: