html - 我需要将我的导航栏放在一个 div 中

Question

我已经尝试了从文本对齐到设置边距的所有方法。我希望导航栏水平居中并垂直位于 div 的底部。

html: http://www.joekellywebdesign.com/businesssample/index.html

<div id="navbar">
          <ul id="MenuBar1" class="MenuBarHorizontal">
              <li><a class="MenuBarItemSubmenu" href="projects.html">Projects</a>
                <ul>
                  <li><a href="restaurant.html">Restaurant</a></li>
                  <li><a href="house.html">House</a></li>
                  <li><a href="mall.html">Mall</a></li>
              </ul>
            </li>
              <li><a href="about.html">About</a></li>
              <li><a class="MenuBarItemSubmenu" href="services.html">Services</a>
                <ul>
                  <li><a class="MenuBarItemSubmenu" href="residential.html">Residential</a>
                    <ul>
                      <li><a href="housing.html">Housing</a></li>
                      <li><a href="storage.html">Storage</a></li>
                  </ul>
                </li>
                  <li><a href="business.html">Business</a></li>
                  <li><a href="government.html">Government</a></li>
              </ul>
            </li>
            <li><a href="contact.html">Contact</a></li>

          </ul>
        </div>

CSS: http://www.joekellywebdesign.com/businesssample/css/styles.css

  /* CSS Document */


* {
    margin:0px; 
    padding:0px;
  }

body {
     background-color:#FF0;
     }

#wrapper {
    width:900px; 
    margin:10px auto;
    background-color:#FFF;
  }

#logo {
    float:left; 
    width:200px; 
    background-color:#FFF;
   }

#navbar {
    float:right; 
    text-align:center;  
    width:700px;
    margin: auto; 
    background-color:#FFF;
   }

Answer 1

你可以这样做:

<style type="text/css">
    div#container {
        position:relative;
        width: 500px;
        height: 300px;
        border: 1px solid black;    
    }    
    div#menu-container {
        position: absolute;
        bottom: 0;
        width: 100%;
    }    
    div#menu {
        position: relative;
        text-align: center;    
    }
</style>
<div id="container">
    <div id="menu-container">
        <div id="menu">
            Hello World!   
        </div>
    </div>
</div>

查看 this jsFiddle进行演示。