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> （为了使自动保证金有效）：

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

Answer 2

也会工作（不知道宽度）

#topnav ul{text-align:center;background:none;}
 #topnav ul li{float:none;display:inline-block;}
 #topnav ul li.separate{float:none;}

Answer 3

问题是你是浮动（float: left）列表元素，因此没有居中。另一方面，ul为display: inline-block，这应该适用于#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: " | "; }或使用背景图片

HTML CSS文本不会居中

3 个答案:

用这个替换你的CSS：