Html 将列表放在div的中间_Html_Css_Html Lists

Html 将列表放在div的中间

html css

Html 将列表放在div的中间,html,css,html-lists,Html,Css,Html Lists,我知道还有很多其他的答案，但我不知道我是否只是做错了什么，但它们不起作用基本上，我在容器div（“header”）左侧的div（“name”）中有一个“logo”（这只是我的名字）。我的导航栏链接也在name div的右侧，在“nav”div中问题是nav div实际上浮动到header div的顶部，而name div完全居中。图片：这是我的HTML文件： <!DOCTYPE html> <html lang=“en”> <head> <t

我知道还有很多其他的答案，但我不知道我是否只是做错了什么，但它们不起作用

基本上，我在容器div（“header”）左侧的div（“name”）中有一个“logo”（这只是我的名字）。我的导航栏链接也在name div的右侧，在“nav”div中

问题是nav div实际上浮动到header div的顶部，而name 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>

我想要的是nav div在header div内垂直居中，就像名称div一样。如何做到这一点？

请参阅我添加到

#name

*{
字体系列：monospace；
}
#标题{
位置：固定；
左：0；
右：0；
排名：0；
背景色：rgb（245245245245）；
盒影：0px 10px 5px#8888888；
}
#名字{
字体大小：20px；
左边距：20px；
显示：inline block；/*确保#name和#name并排对齐*/
线条高度：100%；/*确保垂直居中*/
垂直对齐：中间；/*确保垂直居中*/
}
#导航{
显示：内联块；
}
李海军{
字号：150；
字体大小：24px；
显示：内联块；/*可以在不使用浮点的情况下对齐它们*/
}


托比考克

家
恢复
投资组合
接触

居中是指垂直？@j08691正确，我将编辑我的问题以使其更清晰。

#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 {
 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;
}