0

首先，我意识到在 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 之外，fiddle 中还有一个重置，它解决了一些格式问题。为简洁起见，我在这里省略了它。

4

1 回答 1

0

一个可能的解决方案...使用您在 jsfiddle 中提供的一些 CSS。我改为. position_ 然后，在 上设置一些属性。使用和将 与的底部对齐。然后，设置将左边缘移动到中心。设置一个固定的（随意调整）和一个（它是宽度的负1/2，所以如果你改变宽度就调整）。我还删除了一些没有真正做任何事情的额外属性。希望这可以帮助。#headerrelative#header ulposition:absolutebottom:0ul#headerleft:50%width:680pxmargin-left:-340px

#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元素。希望能回答这个问题。不要害怕玩弄这些价值观……尤其是为了增进你的知识。

于 2013-11-09T03:28:12.063 回答