無法對齊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

來源

2013-05-13 Teo Chuen Wei Bryan

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

試試這個：

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

可以去除浮

來源

2013-05-13 07:08:52 midstack

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

-1

試試這個：

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

來源

2013-05-13 06:53:24

我檢查你的代碼。試試我提供的。它會正常工作。 – 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和類。

來源

2013-05-13 06:56:21 kireirina

確實是最簡單的方法是使用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/

來源

2013-05-13 11:12:59 Saucier

嘗試margin:auto與確切的width並刪除float:left jsfiddle link

起初float:left需要計算精確ul的width。然後我們需要使float:none利用margin:auto;

來源

2013-05-13 13:21:25 vusan

無法對齊navbar中心

回答

相關問題