Centering inline list
I'm trying to center a list of items. I've checked on a few other similar questions, but can't seem to find the right combination of tweaks.
I have a number of containers/sub-containers, but I'm primarily interested in the menu-nav:
<style type="text/css">
.content {
position: relative;
border-top-width: 1px;
width: 100%;
min-width: 960px;
margin-top: -1px;
}
.content-container {
border: 0;
position: relative;
width: 960px;
border-radius: 0 0 0 0;
margin: 0px auto;
}
.full-content-container {
vertical-align: top;
display: inline-block;
min-height: 900px;
width: 958px;
height: 100%;
position: relative;
padding: 15px 0 0 0;
}
.browse-container {
padding: 16px 0 0 0;
font-size: 12px;
width: 958px;
text-align: center;
}
#menu-nav {
margin:0;
padding:0;
list-style:none;
float: left;
}
#menu-nav li {
float: left;
display:block;
background-color: #6F7D94;
position:relative;
z-index:500;
margin:0 1px;
}
#menu-nav li a {
display:block;
padding:5px 10px 5px 10px;
font-weight:200;
text-decoration:none;
text-align:center;
color:#fff;
}
#menu-nav li a:hover {
background:#ccc;
color:#000;
text-decoration:underline;
}
</style>
How can I horizontally center the following menu?
<body>
<div class="con开发者_运维技巧tent">
<div class="content-container">
<div class="full-content-container">
<div class="browse-container">
<ul id="menu-nav">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
Is it what you're looking for : http://jsfiddle.net/4AFkW/5/ ?
if you know what the ultimate width of your menu-nav element is going to be, you can do it this way:
#menu-nav {
margin:0;
padding:0;
list-style:none;
/*float: left;*/
position:relative;
left: 50%;
margin-left: -90px; /* half of the width */
width: 180px;
}
加载中,请稍侯......
精彩评论