HTML |屏幕上的中心菜单栏

需要一些帮助。我只是在学习HTML，并且一直在研究如何在今天做菜单，同时我也遇到了一个问题。HTML |屏幕上的中心菜单栏

我似乎无法弄清楚如何将菜单居中在屏幕上。

这是我到目前为止;

<div id="navMenu"> 
    <ul> 
     <li><a href="#">Home</a></li> 

     <li><a href="#">WWW.</a> 
     <ul> 
      <li><a href="#">Through the years</a></li> 
     </ul></li> 

     <li><a href="#">Browsers</a> 
     <ul> 
      <li><a href="#">IE</a></li> 
      <li><a href="#">Firefox</a></li> 
      <li><a href="#">Chrome</a></li> 
     </ul></li> 

     <li><a href="#">CSS</a> 
     <ul> 
      <li><a href="#">CSS 2.1</a></li> 
      <li><a href="#">CSS 3</a></li> 
     </ul></li> 

     <li><a href="#">Scripting</a> 
     <ul> 
      <li><a href="#">JavaScripts</a></li> 
      <li><a href="#">jQuery</a></li> 
     </ul></li> 

    </ul> 
</div>

当前CSS;

#navMenu{ 
    margin:0; 
    padding:0; 
} 
#navMenu ul{ 
    margin:0; 
    padding:0; 
    line-height:30px; 
} 
#navMenu li{ 
    margin:0; 
    padding:0; 
    list-style:none; 
    float: left; 
    position: relative; 

    background-color: #999; 
    border-radius: 5px; 
} 
#navMenu ul li a{ 
    text-align: center; 
    text-decoration:none; 
    height:30px; 
    width:150px; 
    display:block; 
    color: #FFF; 
    border: 1px solid #FFF; 
    text-shadow: 1px 1px 1px #000; 
} 
#navMenu ul ul{ 
    position:absolute; 
    visibility:hidden; 
    top:32px; 
} 
#navMenu ul li:hover ul{ 
    visibility:visible; 
} 
#navMenu li:hover{ 
    background-color: #09F; 
} 
#navMenu ul li:hover ul li a:hover{ 
    background-color: #CCC; 
    color: #000; 
} 
#navMenu a:hover{ 
    color:#000; 
}

上述方法产生这个.... http://gyazo.com/55cf62d121ef16eb1248e5246d0accae

反正让屏幕中央的菜单栏。

边注：本网站上的任何破坏者标签？

来源

2014-03-18 Snappiestjack

http://stackoverflow.com/search?q=center+menu – JohanVdR

尝试使用display: inline-block和text-align: center。

设置display: inline-block为<ul>和text-align: center为容器#navMenu。设置text-align: left为#navMenu li修复子菜单。

而且

Example

#navMenu{ 
    margin:0; 
    padding:0; 
    text-align: center; 
} 
#navMenu ul{ 
    margin:0; 
    padding:0; 
    line-height:30px; 
    display: inline-block; 
} 
#navMenu li{ 
    margin:0; 
    padding:0; 
    text-align: left; 
    float: left; 
    list-style:none; 
    position: relative; 
    background-color: #999; 
    border-radius: 5px; 
}

来源

2014-03-18 23:41:23 Mathias

这样的作品，好样的，然后它弄乱的子菜单。 http://gyazo.com/f4e606032eca49eacd0fa193fb93c8ab。管理修复它，谢谢。 :) http://gyazo.com/46e18486eca6747527506937aebaded5 – Snappiestjack

更新的答案，但我想你已经知道了。 – Mathias

宽度添加到您的菜单的包装，给左右自动保证金。
您可以调整宽度，具体取决于您希望导航定位的中心位置。

#navMenu { 
width: 960px; 
margin:0 auto; 
padding:0; 
text-align: center;

}

不需要在UL和李的利润率和补白的都有。

#navMenu ul{ 
list-style: none; 
line-height:30px; 
display: inline-block; 
text-align: center;

}

#navMenu li{ 
display: inline;

}

填充应该在这里，让您的所有甚至链接。

#navMenu li a { 
    display: block; 
    padding: 10px;

}

来源

2014-03-19 00:13:52 matthummel

HTML |屏幕上的中心菜单栏

回答

相关问题