首先，我意识到 stackoverflow 上已经发布了类似的问题，但所提供的解决方案都不适合我。我仍然无法正确对齐我的导航——对齐到名为“header”的 div 的中心和底部。
这是一个 fiddle http://jsfiddle.net/dsguffey/g3Rg2/
HTML:
<html>
<body>
<div class="container">
<div id="header">
<ul>
<li>
<p class="quote">Site quote,</p>
<p class="quote">goes here</p>
</li>
<li>Music</li>
<li>Games</li>
<li>Writing</li>
<li>Art</li>
<li>About me</li>
</ul>
</div>
<div id="writing_page">
<div id="writing_box">
</div>
</div>
<div id="footer" style="text-align:center;">
<span style="text-align:center;color:white;">
</span>
</div>
</div>
</body>
</html>
CSS:
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;
}
我可以让导航菜单列表水平居中(这就是它现在在 fiddle 上的样子)，但是我试图让它水平居中所做的任何事情都会使它不再与底部对齐，反之亦然!我试过将#header、ul 和/或 li 变成 display:table-cell。另外，我尝试在 UL 上使用 position:absolute 和 bottom:0px。我试过使用自动边距、vertical-align:bottom、vertical-align:text-bottom 以及我能想到的所有其他方法。我试过将 ul 和 li 的高度强制设置为 100px 或将列表放在具有设置高度和宽度的表格中。这让我发疯。任何帮助将不胜感激。
注意:除了上面的 CSS 之外，fiddle 中还有一个 reset 可以解决一些格式问题。为了简洁起见，我在这里省略了它。
最佳答案
一个可能的解决方案...使用您在 jsfiddle 中提供的一些 CSS。我将 #header 上的 position 更改为 relative。然后，在 #header ul 上设置一些属性。使用 position:absolute 和 bottom:0 将 ul 对齐到 #header 的底部。然后，设置 left:50% 将左边缘移动到中心。设置一个固定的 width:680px(随意调整)和一个 margin-left:-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;
}
更新:为什么 #header 有 position:relative。
绝对定位元素将相对于位置不是static 的第一个父元素定位。如果没有找到，它将使用 html 容器。在这种情况下，您希望 ul 定位在 absolute 但相对于父 #header 元素。希望能回答这个问题。不要害怕玩弄值(value)观……尤其是为了增进您的知识。
关于html - 中心和底部对齐完整列表(再次)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19870538/