Question

首先，我意识到stackoverflow上已经发布了类似的问题，但是没有一个解决方案对我有用。我仍然无法正确对齐我的导航 - 到名为“标题”的div的中心和底部。

这是一个小提琴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;
}

我可以将导航菜单列表水平居中（这就是它现在的小提琴），但我尝试将其水平居中的任何内容都使它不再对齐底部，反之亦然！我已经尝试将#header，ul和/或li转换为display：table-cell。另外，我尝试在UL上使用position：absolute和bottom：0px。我尝试过使用自动边距，vertical-align：bottom，vertical-align：text-bottom，以及我能想到的其他所有内容。我已经尝试将ul和li的高度强制为100px或将列表放在具有设置高度和宽度的表中。这让我疯了。任何帮助将不胜感激。

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

Answer 1

一个可能的解决方案...使用你在jsfiddle中提供的一点CSS。我将position上的#header更改为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元素。希望能回答这个问题。不要害怕玩弄价值观......特别是为了进一步了解你的知识。

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

1 个答案: