div 内的中心列表

Question

我知道还有很多其他答案，但我不知道我是不是做错了什么，但它们没有用。

基本上，我在 div("name") 容器 div("header").我的导航栏链接也位于名称 div 的右侧，它们位于 "nav" div 中。

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

这是我的 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 在 header div 内部垂直居中，就像名称 div 所做的那样。我该怎么做？

Answer 1

查看评论和我添加到 #name

的属性

*{
  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 */
}

<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>

div 内的中心列表

Center list inside of a div

html

css

html-lists