我尝试过从text-align到设置边距的所有内容。我希望导航栏水平居中并垂直放在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;
}
答案 0 :(得分:0)
你可以试试这个,
ul.MenuBarHorizontal {
cursor: default;
font-size: 100%;
list-style-type: none;
margin: auto;
padding: 0;
width: 512px;
}
其次,根据您的设计,导航栏会在您结束的位置结束,
所以你可以试试这个
#navbar {
background-color: #FFFFFF;
float: right;
margin: auto;
margin-top: 49px;
text-align: center;
width: 700px;
}
答案 1 :(得分:0)
你可以这样做:
<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进行演示。
答案 2 :(得分:0)
使用绝对位置很容易将其置于底部:
position: absolute; bottom: 0px;
position: relative;
但是,既然您已经应用了绝对位置,那么您应该使用类似的技术将其水平居中。由于您的导航栏是700px,我们可以使用一些数学来使用相同的绝对位置居中。
left: 50%; margin-left: -350px;
答案 3 :(得分:0)
你可以试试这个。
ul.MenuBarHorizontal {
margin-top: 8%;
float: right;
}