問題描述

我正在嘗試使導(dǎo)航欄居中.我檢查了我的網(wǎng)站，但沒有任何效果我完全不知道為什么它不會居中，這是我想要居中的導(dǎo)航欄 HTML:

I am trying to center my nav bar. I checked my sites but nothing works and I'm completely stumped as to why it won't center, here is my navigation bar HTML that I want to center:

<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='#'>PORTFOLIO</a>
   <ul>
     <li><a >TRAILER</a></li>
     <li><a >MOTION GRAPHICS</a></li>
     <li><a >TRAPCODE PARTICULAR</a></li>

   </ul>
</li>
<li><a >TEMPLATES</a></li>
<li><a >MY BLOG</a></li>
<li><a >CONTACT ME</a></li>


</ul>
</div>

這里是 CSS

*{
  margin:0;
  padding:0;
  outline:0;
}
.nav {
  width:950px;
  height:auto;
  border-bottom:1px solid #eee;
  margin:10px auto 5px;
  display:inline-block;
}
.menu {
  width:auto;
  list-style:none;
  font:$pagenavifont;
  text-align:center;
  margin:0 auto;
}
.menu a {
  float:left;
  color:#999;
  text-decoration:none;
  text-transform:uppercase;
  width:auto;
  line-height:36px;
  padding:0 20px;
}
.menu a:hover,li.menuhover a{
  color:#111;
}
.menu li {
  position:relative;
  float:left;
  width:auto;
}
.menu li:last-child {
  background:none;
}
.menu ul{
  display:none;
  position:absolute;
  top:36px;
  left:0;
  background:#fbfbfb;
  display:none;
  list-style:none;
}
.menu ul li{
  float:none;
  border-top:1px solid #e3e3e3;
  border-right:1px solid #e3e3e3;
  border-left:1px solid #e3e3e3;
  width:auto;
  background:none;
}
.menu ul li:last-child {
  border-bottom:1px solid #e3e3e3
}
.menu ul li a{
  float:none;
  display:block;
  background:none;
  line-height:36px;
  min-width:137px;
  width:auto;
  text-align:left;
  padding-left:10px;
  color:#444;
}

.menu ul li a:hover{
  background:#fdfdfd;
  color:#777;
}

我會給您一個指向該頁面的鏈接，但它正在 Dreamweaver 中完成，尚未啟動.logobar.jpg 是網(wǎng)頁的標(biāo)志.我喜歡它的外觀，但是當(dāng)我縮小屏幕尺寸時，它需要居中，而不是被切斷或帶到下一行.

I would give you a link to the page but it's being done in Dreamweaver and is not up yet. The logobar.jpg is the logo for the webpage. I love how it looks, but it needs to be centered and not be cut off or taken to the next line when I shrink my screensize.

我在幾乎所有的類上都嘗試了 float: right、float: left 和 float: none；text-align: center 在html端的每個類上；我在每個班級都嘗試過 align=center ；display: inline、inline-block 在 ul 和 li 類上.

I tried each of float: right, float: left, and float: none on almost all of the classes; text-align: center on each class on the html side; I have tried align=center on each class; display: inline, inline-block on ul and li classes.

感謝您的幫助！

推薦答案

在您的 .menu 類上，您確實設(shè)置了 text-align:center.我們當(dāng)然可以使用它來居中子節(jié)點.

On your .menu class, you do have text-align:center set. We can certainly use that to center the child nodes.

所以在您的 .menu li css 屬性中，添加 display:inline-block 并刪除浮動.這將使您的列表項居中.

So within your .menu li css property, add display:inline-block and remove the floats. This will center your list items.

見小提琴: http://jsfiddle.net/RGREA/

這篇關(guān)于帶有 CSS 的中心導(dǎo)航欄的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！