如何集中我的导航栏？

时间：2015-09-12 15:13:35

标签： html css navigation nav centering

我有很多次尝试，但是我在所有尝试中都失败了，这是我创建的代码，但我找不到将导航栏放在中心的方法。这是我的代码

<div id="nav">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Models</a>
<ul>
  <li><a href="#">Lite</a></li>
  <li><a href="#">Domestic</a></li>
  <li><a href="#">Regional</a></li>
  <li><a href="#">Continental</a></li>
  <li><a href="#"></a></li>
</ul>
</li>
<li><a href="#">Benefits</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Technical</a></li>
<li><a href="#">Other Products</a>
<ul>
  <li><a href="#">EMA Loader</a></li>
  <li><a href="#">Portable Airstairs</a></li>
</ul>
</li>

<li><a href="#">Testimonials</a></li>
<li><a href="#">FAQ's</a></li>
</ul>
</nav>
</div>
<style type="text/css">
#primary_nav_wrap {
 margin-top: 15px;

}

#primary_nav_wrap ul {
list-style: none;
 position: relative;
padding: 0
}

 #primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 13px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
 }

#primary_nav_wrap ul li {
position: relative;
float: left;
margin-right: auto;
margin-left: auto;
padding: 0
}

#primary_nav_wrap ul li.current-menu-item {
 background: #ddd
}

#primary_nav_wrap ul li:hover {
background: #75D1FF;
}

#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}

#primary_nav_wrap ul ul li {
float: none;
width: 200px
}

#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}



</style>

请尝试帮助我，因为我制作的网站要求导航栏位于中心

6 个答案:

答案 0 :(得分：1)

请找到更新的代码，它适用于我，希望它能解决您的问题。

<div id="nav">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Models</a>
<ul>
  <li><a href="#">Lite</a></li>
  <li><a href="#">Domestic</a></li>
  <li><a href="#">Regional</a></li>
  <li><a href="#">Continental</a></li>
  <li><a href="#"></a></li>
</ul>
</li>
<li><a href="#">Benefits</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Technical</a></li>
<li><a href="#">Other Products</a>
<ul>
  <li><a href="#">EMA Loader</a></li>
  <li><a href="#">Portable Airstairs</a></li>
</ul>
</li>

<li><a href="#">Testimonials</a></li>
<li><a href="#">FAQ's</a></li>
</ul>
</nav>
</div>
<style type="text/css">
#primary_nav_wrap {
 margin-top: 15px;
 text-align:center;

}

#primary_nav_wrap ul {
list-style: none;
 position: relative;
padding: 0;
margin:0px auto;
display:inline-block;
}

 #primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 13px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
 }

#primary_nav_wrap ul li {
position: relative;
float: left;
margin-right: auto;
margin-left: auto;
padding: 0
}

#primary_nav_wrap ul li.current-menu-item {
 background: #ddd
}

#primary_nav_wrap ul li:hover {
background: #75D1FF;
}

#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}

#primary_nav_wrap ul ul li {
float: none;
width: 200px
}

#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}

</style>

答案 1 :(得分：0)

以下两行要添加到您的css中：

 #primary_nav_wrap {
   margin-top: 15px;
   width: 800px;
   margin: 0 auto;
 }

添加宽度和边距：0自动将帮助您。只添加余量：0自动无效，需要宽度才能工作。

答案 2 :(得分：0)

简单的解决方案：

#nav{
    width:100%;
    text-align:center;
}
#primary_nav_wrap {
    margin: 15px auto 0 auto;
    width:780px;
}

http://jsfiddle.net/e8rqxbe5/1/

答案 3 :(得分：0)

其他解决方案是：

           $gallery=$_GET["gallery"];
                    $album=$_GET["album"];
if(isset($_FILES['files'])){
    $errors= array();
    foreach($_FILES['files']['tmp_name'] as $key => $tmp_name ){
        $file_name = $key.$_FILES['files']['name'][$key];
        $file_size =$_FILES['files']['size'][$key];
        $file_tmp =$_FILES['files']['tmp_name'][$key];
        $file_type=$_FILES['files']['type'][$key];  
        if($file_size > 2097152){
            $errors[]='File size must be less than 2 MB';
        }       
        $query="INSERT into commerce_images (`USER_ID`,`FILE_NAME`,`FILE_SIZE`,`FILE_TYPE`, `added_by`, `gallery_id`, `sub_gallery_id`) 
        VALUES('$user','$file_name','$file_size','$file_type', '$Fname $Sname', '$gallery', '$album'); ";
        $desired_dir="uploads";
        if(empty($errors)==true){
            if(is_dir($desired_dir)==false){
                mkdir("$desired_dir", 0700);        // Create directory if it does not exist
            }
            if(is_dir("$desired_dir/".$file_name)==false){
                move_uploaded_file($file_tmp,"$desired_dir/".$file_name);
            }else{                                  // rename the file if another one exist
                $new_dir="$desired_dir/".$file_name.time();
                 rename($file_tmp,$new_dir) ;               
            }
         mysql_query($query);           
        }else{
                print_r($errors);
        }
    }
    if(empty($error)){
?>

<script>location.assign("commerce-images.php?state=new");</script>
                                        <?php
    }
}
?>

http://jsfiddle.net/u5xko1dn/1/

答案 4 :(得分：0)

#nav{
    width:100%;
    text-align:center;
}

答案 5 :(得分：0)

＆＃13;
＆＃13; 
#primary_nav_wrap {
 margin-top: 15px;

}

#primary_nav_wrap ul {
list-style: none;
 position: relative;
padding: 0
}

 #primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 13px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
 }

#primary_nav_wrap ul li {
position: relative;
float: left;
margin-right: auto;
margin-left: auto;
padding: 0
}

#primary_nav_wrap ul li.current-menu-item {
 background: #ddd
}

#primary_nav_wrap ul li:hover {
background: #75D1FF;
}

#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}

#primary_nav_wrap ul ul li {
float: none;
width: 200px
}

#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}

/* center */
#primary_nav_wrap {
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: center;
  justify-content: center;		

  -webkit-align-items: center;
  align-items: center;

  //width: 100%;
  //height: auto;
  //background-color: lightgrey;							
}

ul {
  //background-color: cornflowerblue;
  //padding: 1rem;
  //margin: 1rem;							

  -webkit-align-self: center;							
  align-self: center;
}
/* || center */
＆＃13; 
<div id="nav">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Models</a>
<ul>
  <li><a href="#">Lite</a></li>
  <li><a href="#">Domestic</a></li>
  <li><a href="#">Regional</a></li>
  <li><a href="#">Continental</a></li>
  <li><a href="#"></a></li>
</ul>
</li>
<li><a href="#">Benefits</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Technical</a></li>
<li><a href="#">Other Products</a>
<ul>
  <li><a href="#">EMA Loader</a></li>
  <li><a href="#">Portable Airstairs</a></li>
</ul>
</li>

<li><a href="#">Testimonials</a></li>
<li><a href="#">FAQ's</a></li>
</ul>
</nav>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题