HTML CSS 文本不会居中

Question

我正在尝试集中我的导航面板，但是没有任何乐趣:-(

请看下面的代码:

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

关于如何使文本居中有什么想法吗？

Answer 1

您是否试图将 #topnav 居中？ <ul> (您使用的是 margin: auto )？

前提是 #topnav的宽度大于 <ul> 的宽度(否则你不能居中)，你需要设置一个宽度为 <ul> (为了使自动 margin 起作用):

#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;  }