居中水平导航栏

我有一个导航栏作为列表 - 这是我的任务所必需的。无论如何，我试图集中，但它不是相当工作。发生了什么是我不得不指定具体的利润率。我对CSS和HTML很陌生。居中水平导航栏

{ 
 
    background-color: #bdd2ed; 
 
    text-align: center; 
 
}    
 

 

 
h1,h2 
 
{ 
 
    font-family: sans-serif; 
 
} 
 

 

 
ul.navigbar 
 
{ 
 
    margin: 0 auto; 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 

 
li.navigbar 
 
{ 
 
    list-style-type: none; 
 
    width: 10%; 
 
    text-align: center; 
 
    float: left; 
 
} 
 

 

 
a.navigbar 
 
{ 
 
    text-decoration: none; 
 
    display:block; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>china_travel.html</title> 
 
     <link rel="stylesheet" type="text/css" href="travel.css"> 
 
    </head> 
 
    <body> 
 
     <img src="images/flags/china_flag.jpg" height="50" width="75" alt="Flag of China" title="Flag of China" class="center"> 
 
     <h1 class="center">China Travel Deals</h1> 
 
     <ul class="navigbar"> 
 
      <li class="navigbar"><a href="index.html" class="navigbar">Home</a></li> 
 
      <li class="navigbar"><a href="australia_travel.html" class="navigbar">Australia Travel</a></li> 
 
      <li class="navigbar"><a href="brazil_travel.html" class="navigbar">Brazil Travel</a></li> 
 
      <li class="navigbar"><a href="china_travel.html" class="navigbar">China Travel</li> 
 
      <li class="navigbar"><a href="us_travel.html" class="navigbar">United States Travel</li> 
 
     </ul> 
 
    </body> 
 
</html>

来源

2017-07-31 SkyjumperTalon

您是要将导航栏本身居中，还是只将导航栏放置在导航栏中央？ –

您可以使用此代码：

见现场演示：https://output.jsbin.com/vukisat

https://jsbin.com/vukisat/14/edit?html,css,output

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>china_travel.html</title> 
     <link rel="stylesheet" type="text/css" href="travel.css"> 
    </head> 
    <body> 
     <img src="images/flags/china_flag.jpg" height="50" width="75" alt="Flag of China" title="Flag of China" class="center"> 
     <h1 class="center">China Travel Deals</h1> 
     <ul class="navigbar"> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="australia_travel.html">Australia Travel</a></li> 
      <li><a href="brazil_travel.html">Brazil Travel</a></li> 
      <li><a href="china_travel.html">China Travel</li> 
      <li><a href="us_travel.html">United States Travel</li> 
     </ul> 
    </body> 
</html>

CSS：

body{ 
    background-color: #bdd2ed; 
    text-align: center; 
}    
h1,h2{ 
    font-family: sans-serif; 
} 
ul.navigbar{ 
    margin: 0px; 
    padding: 0px; 
    display: block; 
    width: 100%; 
} 
.navigbar li{ 
    list-style-type: none; 
    width: 10%; 
    text-align: center; 
    display:inline-block; 
} 
.navigbar li a{ 
    text-decoration: none; 
    display:block; 
}

来源

2017-07-31 20:36:38

您可以使用Flexbox的。虽然我不是很确定你在找什么。

https://jsfiddle.net/8pycp48z/

ul.navigbar 
{ 
    margin: 0 auto; 
    display: flex; 
    width: 100%; 
    justify-content: space-around; 
    padding: 0; 
}

来源

2017-07-31 20:36:39

Mathy回答（任何数量的项目意愿的大小和中心，与任何填充）

HTML：

<ul> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
    <li>four</li> 
</ul>

CSS：

ul { 
    padding: 0px; 
    margin: 0px; 
    float: left; 
    position: relative; 
    left: 50%; 
} 

li { 
    padding: 0px; 
    margin: 0px; 
    float: left; 
    position: relative; 
    right: 50%; 
    list-style: none; 
    padding: .5em; 
    background-color:red; 
}

小提琴：https://jsfiddle.net/xc4yktc5/

请注意：您可能会遇到主UL上溢的问题。

来源

2017-07-31 20:46:22 circusdei

居中水平导航栏

回答

相关问题