html - navbar を 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

絶対位置を使用すると、簡単に一番下に移動できます。

1. これを #navbar に適用します。position: absolute; bottom: 0px;
2. 次に、これを親に適用します。position: relative;

ただし、絶対位置を適用したので、同様の手法を使用して水平方向の中央に配置する必要があります。navbar は 700px であるため、同じ絶対位置を使用して、いくつかの計算を使用して中央に配置できます。

1. これを #navbar に適用します。left: 50%; margin-left: -350px;
2. 作業例: http://jsfiddle.net/ky9av/

Answer 2

次のようなことができます。

<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>

デモンストレーションについては、この jsFiddleを確認してください。

Answer 3

これを試すことができます。

ul.MenuBarHorizontal {
margin-top: 8%;
float: right;
}