2

我仍然无法正确地将导航对齐到页面底部的中心。整个页面被包裹在一个名为 wrapper 的居中 div 中，其宽度为：850px；

我需要根据此页面包装器将我的手册居中并放置在页面底部。

此代码将放置到底部，但不会将其与中心对齐。任何想法如何解决这个问题？

[编辑] 这是一个小提琴http://jsfiddle.net/U2XpH/

乍一看可能看起来不错，但是当您拉伸结果窗口（或浏览器页面）时，就会发现问题。

HTML：

  <body>
    <div id="wrapper">      
      <!-- NAVIGATION -->
      <div id="navWrapper">
        <nav class="center">
          <ul>
            <li><a href="#" class="btn1">Option 1</a></li>
            <li><a href="#" class="btn2">Option 2</a></li>
          </ul>
        </nav>
      </div>   
  </body>

CSS：

html, body{
height:100%;
}

body {
    min-width: 393px;    
    margin:0;
    padding:0;
    font-family:verdana,tahoma,sans-serif;
    font-size: 1.2em;
    line-height: 1.5em;
    background-color: #E3E3E3;
    background-image: url("../img/bg1.jpg"); 
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;        
}
#wrapper {
  background: #DAFFDA;
  margin: 20px auto;
  padding: 30px 17px 10px;
  width: 850px;
}
#navWrapper {
  bottom: 1em;
  position: fixed;
  width: 100%;
  margin: 20px 0;
}
nav {
    min-width: 320px;
  position: relative;
    margin: 60px 0;
}

nav ul {
  margin: 0;
  padding: 0;  
}

nav li {
  margin-right: 1.5em;
  padding: 0;    
  list-style: none;
  display: inline-block;
}

正确的小提琴在这里 http://jsfiddle.net/U2XpH/1/

4

2 回答 2

0

尝试将 #navWrapper CSS 更改为：

#navWrapper {
bottom: 1em;
left:0;
right:0;
position: fixed;
width: 850px;
text-align:center;
margin: 20px auto;
}
于 2013-08-05T20:36:28.927 回答
0

添加

文本对齐：居中；

到你的 CSS 的 nav ul 部分

于 2013-08-05T20:05:10.000 回答