我有一个下拉导航菜单,我需要在div中居中但text-align:center对我不起作用。
该网站位于http://www.joekellywebdesign.com/churchsample1/index.html
HTML
<div id="navmenudiv">
<ul id="navmenu">
<li><a href="index.html">Home</a></li>
<li>
<a href="about.html">About Us</a>
<ul class="sub1">
<li><a href="introduction.html">Introduction</a></li>
<li><a href="whoweare.html">Who We Are</a></li>
<li><a href="staff.html">Staff</a></li>
</ul>
</li>
<li>
<a href="services.html">Services</a>
<ul class="sub1">
<li><a href="sundaymorning.html">Sunday Morning</a></li>
<li><a href="sundayevening.html">Sunday Evening</a></li>
<li><a href="wednesday.html">Wednesday Evening</a></li>
</ul>
</li>
<li><a href="resources.html">Resources</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="news.html">News and Events</a></li>
</ul>
</div>
CSS
navmenudiv {
z-index:60;
margin: -30px 0;
height:50px;
background-color:#5340BF;
top:40;position:
relative;
text-align:center;
}
答案 0 :(得分:0)
这是一个简单的解决方案:
ul#navmenu li {
float:left; /* REMOVE */
display: inline-block; /* ADD */
}
目前,li
正在浮动。通过将它们更改为inline-block
元素,它们将居中 - 假设您已在父级上使用text-align:center
。
更新了CSS:
ul#navmenu li {
margin-right: 4px;
text-align: center;
width: 125px;
display: inline-block;
position: relative;
}
答案 1 :(得分:0)
ul#navmenu li {
width: 125px;
text-align: center;
position: relative;
margin-right: 4px;
display: inline-block;
margin: 0 10px;
}