Html 居中和底部对齐完整列表（再次）

首先，我意识到stackoverflow上已经发布了一些类似的问题，但没有一个解决方案适合我。我仍然不能正确地对齐我的导航——到一个名为“header”的div的中间和底部

这是一把小提琴

HTML:

我可以让导航菜单列表水平居中（这就是它现在在小提琴上的方式），但我尝试使它水平居中的任何操作都会使它不再与底部对齐，反之亦然！我已经尝试将#header、ul和/或li转换为display:table cell。此外，我还尝试在UL上使用position:absolute和bottom:0px。我尝试过使用自动边距、垂直对齐：底部、垂直对齐：文本底部，以及我能想到的所有其他功能。我已经尝试将ul和li的高度强制为100px，或者将列表放置在设置了高度和宽度的表格中。这快把我逼疯了。任何帮助都将不胜感激

---

注意：除了上面的CSS之外，fiddle中还有一个重置，它解决了一些格式问题。为了简洁起见，我在这里省略了它。

这是一个可能的解决方案……使用您在JSFIDLE中提供的一些CSS。我将

标题上的
位置
更改为
相对位置
。然后，在
#头ul
上设置一些属性。使用
position:absolute
和
bottom:0
将
ul
与
#header
的底部对齐。然后，设置
left:50%
将左边缘移到中心。设置固定的
宽度：680px
（请随意调整）和
左侧边距：-340px
（宽度为负1/2，因此如果更改宽度，请进行调整）。我还删除了一些没有真正起作用的额外属性。希望这有帮助

#header{
  position:relative;
  text-align:center;
  height:100px;
  width:100%;
  background-color:#000000;
}
#header ul{
    position:absolute;
    bottom:0;
    left: 50%;
    width: 680px;
    margin-left: -340px;
    list-style-type:none;
    text-align:center;
}

更新：为什么
#标题
具有
位置：相对

绝对定位元素将相对于第一个父元素进行定位，该父元素的位置不是
静态
。如果没有找到，则使用
html
容器。在这种情况下，您希望将
ul
定位为
绝对
，但相对于父
#头
元素。希望这能回答问题。不要害怕玩弄这些价值观……尤其是为了进一步增进你的知识
 非常感谢你！它就像一个符咒。我理解你所做的所有改变，除了一件事。为什么页眉位置需要是相对的？我更新了解决方案，以回答您关于
#页眉
元素的问题。如果解决方案有效，不要忘记将其标记为可接受的答案。这对我们双方都有好处。：）
html{
  height:100%;
}
body{
  height:100%;
}   
.container{
  width:100%;
  height:100%;
}
#footer{
  position:absolute;
  height:100px;
  width:100%;
  bottom:0px;
  background-color:#000000;
}
/*navigation*/
#header{
  position:absolute;
  display:table-cell;
  text-align:center;
  vertical-align:text-bottom;
  vertical-align:bottom;
  height:100px;
  width:100%;
  background-color:#000000;
}
#header ul{
  list-style-type:none;
  text-align:center;
  vertical-align:bottom;
  vertical-align:text-bottom;
}
#header li{
  display:inline-block;
  color:goldenrod;
  margin-right:10px;
  margin-left:10px;
  font-size:10pt;
  font-weight:bold;
  font-family:'Segoe Script';
}
.quote{
  text-align:right;
  font-size:18pt; 
}
/*Content*/
#writing_page{
  position:absolute;
  width:100%;
  top:100px;
  bottom:100px;
  background-image:url('./images/bg.png');
  color:black;
  overflow-y:scroll;
  overflow-x:hidden;
}

#header{
  position:relative;
  text-align:center;
  height:100px;
  width:100%;
  background-color:#000000;
}
#header ul{
    position:absolute;
    bottom:0;
    left: 50%;
    width: 680px;
    margin-left: -340px;
    list-style-type:none;
    text-align:center;
}