我尝试制作水平菜单并且成功了。但是如何让它到达 div 的中心,因为我尝试放置 text-align:center
、vertical-align:middle
和 display:inline
。他们根本不工作..
首先,我的 HTML 如下所示
.nav {
border:1px solid #CCC;
border-width:1px 0;
list-style:none;
margin:0 auto;
padding:20px 0;
width:100%;
text-align: center;
}
ul.nav-menu {
list-style: none;
padding: 0;
font-size: 14px;
line-height: 14px;
font-family: 'latoregular';
margin: 0 auto;
width: 100%;
text-align:center;
}
ul.nav-menu:after {
content: "";
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
ul.nav-menu li {
float: left;
margin: 0 0 0 10px;
position: relative;
}
ul.nav-menu li:first-child {
margin: 0;
}
<div class="nav">
<ul class="nav-menu">
<li> <a href="#" class="selected"> HOME </a> </li>
<li> <a href="#"> PORTFOLIO </a> </li>
<li> <a href="#"> BLOG </a> </li>
<li> <a href="#"> CONTACT </a> </li>
</ul>
</div>
最后,这里是 JSFIDDLE .
如何将 .nav-menu
推到 .nav
的中心?有什么想法吗?
最佳答案
删除 width
并将 display: inline-block
添加到您的 ul.nav-menu
:
ul.nav-menu {
list-style: none;
padding: 0;
font-size: 14px;
line-height: 14px;
font-family: 'latoregular';
margin: 0 auto;
display: inline-block; // add display: inline-block;
text-align:center;
}
您已经完成了剩下的工作(在父容器上设置 text-align: center
)。
关于html - 将水平菜单制作到div的中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27404004/