3

我正在尝试集中我的导航面板，但是并不高兴:-(

请看下面的代码：

HTML：

<nav id="topnav" class="clear2">  


<ul>
  <li <?php if ($a==1) {echo "class='active'";}?> ><a href="index.php">HOME</a></li> 
  <li class="separate">|</li> 
  <li <?php if ($a==2) {echo "class='active'";}?> ><a href="Services.php">SERVICES</a></li> 
  <li class="separate">|</li>  
  <li <?php if ($a==3) {echo "class='active'";}?> ><a href="AboutUs.php">ABOUT US</a></li>
  <li class="separate">|</li>  
  <li <?php if ($a==4) {echo "class='active'";}?> ><a href="Testimonials.php">TESTIMONIALS</a></li>
  <li class="separate">|</li>  
  <li <?php if ($a==5) {echo "class='active'";}?> ><a href="Press.php">PRESS</a></li>
  <li class="separate">|</li> 
  <!--<li><a href="#">DropDown</a>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </li>-->
  <li <?php if ($a==6) {echo "class='active'";}?> ><a href="Charity.php">CHARITY INVOLVMENT</a></li>
  <li class="separate">|</li>  
  <li <?php if ($a==7) {echo "class='active'";}?> ><a href="Books.php">BOOKS</a></li>
  <li class="separate">|</li>  
  <li <?php if ($a==8) {echo "class='active'";}?> ><a href="ContactUs.php">CONTACT</a></li>
</ul>

CSS：

#topnav{ display:block; height:23px; padding-top:12px; 0; font-size:11px;  }
#topnav li{float:left; margin-right:15px; text-transform:uppercase;}
#topnav ul{display: inline-block; padding-left:50px; margin-left:auto; margin-right:auto;}
#topnav .separate {float:left; margin-right:15px; text-transform:uppercase; font-size:9.5px; padding-top:1px; }
#topnav li li{margin-left:0;}
#topnav li a:link, #topnav li a:visited, #topnav li a:hover{display:block; margin:0; padding:0; color:#FFFFFF;}
#topnav ul ul li a:link, #topnav ul ul li a:visited{border:none;}
#topnav li a:hover, #topnav li.active a{color:#93DBF3;}
#topnav li li a:link, #topnav li li a:visited{width:150px; float:none; margin:0; padding:0px 0px; color:#666666; background-color:#F9F9F9; border:none;}
#topnav li li a:hover{color:#FF9900; background-color:#F9F9F9;}
#topnav ul ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; padding:0px 0 0 0; border-bottom:1px solid #666666; background-color:#b0e0e6;}
#topnav ul ul a{width:140px;}
#topnav li:hover ul{left:auto;}
#topnav li:hover{position:static;}
#topnav li.last{margin-right:0;}

该网站可以在这里找到：http: //helpyourselfassociates.com/NEW/index.php

关于如何使文本居中的任何想法？

4

3 回答 3

1

#topnav <ul>您是否要使（您正在使用）居中margin: auto？

如果#topnav' 的宽度大于 的宽度<ul>（否则您无法将其居中），则需要将宽度设置为<ul>（以使自动边距起作用）：

#topnav ul {
    display: inline-block;
    padding-left: 50px; 
    width: ;
    margin: 0 auto;
}

或者：

#topnav {
    text-align: center;
}

并修复padding-top:12px; 0;：

#topnav{ display:block; height:23px; padding-top:12px; 0; font-size:11px;  }
于 2012-12-07T07:50:58.310 回答
0

也可以工作（不知道宽度）

#topnav ul{text-align:center;background:none;}
 #topnav ul li{float:none;display:inline-block;}
 #topnav ul li.separate{float:none;}
于 2012-12-07T08:00:10.843 回答
0

问题是您浮动（float: left）列表元素，因此没有居中。另一方面，你有display: inline-blockul，这应该适用于#topnav li.

用这个替换你的CSS：

#topnav{ display:block; height:23px; padding-top:12px; 0; font-size:11px;  }
#topnav li{ display: inline-block; margin-right:15px; text-transform:uppercase;}
#topnav ul{display: inline-block; padding-left:50px; margin-left:auto; margin-right:auto;}
#topnav .separate {margin-right:15px; text-transform:uppercase; font-size:9.5px; padding-top:1px; }
#topnav li li{margin-left:0;}
#topnav li a:link, #topnav li a:visited, #topnav li a:hover{display:block; margin:0; padding:0; color:#FFFFFF;}
#topnav ul ul li a:link, #topnav ul ul li a:visited{border:none;}
#topnav li a:hover, #topnav li.active a{color:#93DBF3;}
#topnav li li a:link, #topnav li li a:visited{width:150px; float:none; margin:0; padding:0px 0px; color:#666666; background-color:#F9F9F9; border:none;}
#topnav li li a:hover{color:#FF9900; background-color:#F9F9F9;}
#topnav ul ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; padding:0px 0 0 0; border-bottom:1px solid #666666;}
#topnav ul ul a{width:140px;}
#topnav li:hover ul{left:auto;}
#topnav li:hover{position:static;}
#topnav li.last{margin-right:0;}

旁白：您可以改进您的 CSS 并稍微清理代码，也避免使用<li class="separate">|</li>、尝试类似li:after{content: " | "; }或使用背景图片

于 2012-12-07T08:19:11.100 回答