Question

我知道那里有很多其他的答案，但我不知道我是不是做错了什么，但他们没有工作。

基本上，我在容器div（“标题”）左侧的div（“名称”）中有一个“徽标”（它只是我的名字）。我还在名称div的右边有我的导航栏链接，它们位于“nav”div中。

问题是导航div实际上浮动到标题div的顶部，而名称div完全居中。照片： enter image description here

这是我的HTML文件：

<!DOCTYPE html>
<html lang=“en”>
<head>
  <title>Toby Caulk</title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
</head>
<body>

<div id="header">
  <header>
      <div id="name">
          <h1>Toby Caulk</h1>
      </div>

      <div id="nav">
          <nav>
              <ul>
                  <li>Home</li>
                  <li>Resume</li>
                  <li>Portfolio</li>
                  <li>Contact</li>
              </ul>
          </nav>
      </div>
  </header>
</div>

</body>
</html>

CSS：

*{
  font-family: monospace;
}

#header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background-color: rgb(245, 245, 245);
  box-shadow: 0px 10px 5px #888888;
}

#name {
 float: left;
 font-size: 20px;
 margin-left: 20px;
}

#nav {
  float: left;
}

nav ul li {
  display: inline-block;
}

nav ul {
  padding: 0;
  list-style-type: none;
}

nav li {
  font-weight: 150;
  font-size: 24px;
}

我想要的是导航div在标题div内垂直居中，就像div正在做的那样。我该怎么做？

Answer 1

查看我添加到#name

的评论和属性

＆＃13;

*{
  font-family: monospace;
}




#header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background-color: rgb(245, 245, 245);
  box-shadow: 0px 10px 5px #888888;
}

#name {
 font-size: 20px;
 margin-left: 20px;
  display: inline-block; /* Ensures that #name and #name aligns side by side */
  line-height: 100%; /* Makes to ensure vertical centering */
  vertical-align: middle; /* Makes sure it's centered vertically */
}

#nav {
display: inline-block;
}



nav li {
  font-weight: 150;
  font-size: 24px;
    display: inline-block; /* You can align them without using float */
}

＆＃13;

<div id="header">
  <header>
      <div id="name">
          <h1>Toby Caulk</h1>
      </div>

      <div id="nav">
          <nav>
              <ul>
                  <li>Home</li>
                  <li>Resume</li>
                  <li>Portfolio</li>
                  <li>Contact</li>
              </ul>
          </nav>
      </div>
  </header>
</div>

＆＃13;

div中的中心列表

1 个答案: