无法对齐navbar中心

问题描述：

我在这个论坛上搜索了很多问题，它似乎并没有帮助。尽管以下大部分答案都是text-align = center;不适用于我，但我试图以我的导航栏为中心。在ASP.NET无法对齐navbar中心

HTML代码：

<html lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>untitled</title> 
     <link rel="stylesheet" href="css/style.css" type="text/css" /> 

     <!--[if lt IE 8]> 
      <script src ="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE8.js"></script> 
     <![endif]-->  
    </head> 

    <body> 
     <ul id="nav"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Login</a></li> 
      <li><a href="#">Report</a></li> 
      <li><a href="#">Recent cases</a></li> 
      <li><a href="#">About</a></li>  
     </ul> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>  
     <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script> 
     <script type="text/javascript" src="js/scripts.js"></script> 
    </body> 
</html>

CSS代码：

body { 
font-family: helvetica, arial, sans-serif; 
background: #e3e3e3; 
text-align: center; 
} 

/* MENU */ 

#nav { 
text-align: center; 
background: #e5e5e5; 
float: left; 
margin: 0; padding: 0; 
border: 1px solid white; 
border-bottom: none; 
} 

#nav li a, #nav li { 
    text-align: center; 
float: left; 
} 

#nav li { 
text-align: center; 
list-style: none; 
position: relative; 
} 

#nav li a { 
text-align: center; 
padding: 1em 2em; 
text-decoration: none; 
color: white; 
background: #292929; 
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929)); 
border-right: 1px solid #3c3c3c; 
border-left: 1px solid #292929; 
border-bottom: 1px solid #232323; 
border-top: 1px solid #545454; 
} 

#nav li a:hover { 
background: #2a0d65; 
background: -moz-linear-gradient(top, #11032e, #2a0d65); 
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65)); 
} 


/* Submenu */ 

.hasChildren { 
position: absolute; 
width: 5px; height: 5px; 
background: black; 
right : 0; 
bottom: 0; 
}  

#nav li ul { 
display: none; 
position: absolute; 
left: 0; 
top: 100%; 
padding: 0; margin: 0; 
} 

#nav li:hover > ul { 
display: block; 
} 

#nav li ul li, #nav li ul li a { 
float: none; 
} 

#nav li ul li { 
_display: inline; /* for IE6 */ 
} 

#nav li ul li a { 
width: 150px; 
display: block; 
} 

/* SUBSUB Menu */ 

#nav li ul li ul { 
display: none; 
} 

#nav li ul li:hover ul { 
left: 100%; 
top: 0; 
} 


#nav li ul

也为此提供html。 – vusan 2013-05-13 06:51:09

答

试试这个：

#nav{ 
    position:absolute; 
    left:30%; 
}

可以去除浮

你也可以通过设置 #nav { width：xx; display：block; margin：0 auto; } – OctoD 2013-05-13 11:56:24

答

试试这个：

#nav{ 
margin-left:10px; (Increase the px until the nav reach center) 
}

我检查你的代码。试试我提供的。它会正常工作。 – 2013-05-13 07:02:51

你的意思是在#nav中添加margin-left行吗？我试过了，它似乎没有工作 #nav { margin-left：200px; 背景：＃e5e5e5; float：left; margin：0px;填充：0; border：1px纯白色; border-bottom：none; } – 2013-05-13 07:06:31

删除'margin：0px;'。然后它会工作。 – 2013-05-13 07:09:12

答

这是你所指的部分吗？

#nav li a, #nav li { 
    text-align: center; 
    float: left; 
}

顺便说一句，尝试删除float：left部分。你的代码几乎让我发疯。你应该添加ID和类。

答

确实是最简单的方法是使用text-align: center;。您遇到的问题是<li>标签是块级元素。因此，无法在外部<ul>元素上应用text-align（仅适用于内联元素），以便将内部<li>元素居中。因此，你必须先告诉<li>标签通过应用display财产的行为类似于内联元素：

标记：

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li>  
</ul>

风格：

ul { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 

ul li { 
    display: inline-block; // or display: inline; 
}

这里是的jsfiddle我的工作示例： http://jsfiddle.net/7MKdk/

答

尝试margin:auto与确切的width并删除float:left jsfiddle link

起初float:left需要计算精确ul的width。然后我们需要使float:none利用margin:auto;

无法对齐navbar中心

相关推荐