如何将导航栏对准中心

Question

我想知道如何将导航栏内容对齐到中心，这是我正在使用的代码。 实际上我不知道代码的问题是什么，将不胜感激。

小提琴

.tg-navigationarea {
  width: 100%;
  float: left;
  position: relative;
  background: #000;
}

.tg-nav {
  z-index: 2;
  float: left;
  text-transform: uppercase;
  font: 400 13px/40px 'Open Sans', Arial, Helvetica, sans-serif;
}

.tg-navigation {
  width: 100%;
  float: left;
  padding: 0;
  line-height: inherit;
}

.tg-navigation ul {
  margin: 0;
  list-style: none;
  line-height: inherit;
}

.tg-navigation>ul {
  width: 100%;
  float: left;
}

.tg-navigation ul li {
  line-height: inherit;
  list-style-type: none;
}

Answer 1

将display:inline-block赋予li和text-align:center; padding:0; text-align:center; padding:0; ul标签。

 .tg-navigationarea { width: 100%; float: left; position: relative; background: #f7f7f7; } .tg-nav { z-index: 2; float: left; text-transform: uppercase; font: 400 13px/40px 'Open Sans', Arial, Helvetica, sans-serif; } .tg-navigation { width: 100%; float: left; padding: 0; line-height: inherit; } .tg-navigation ul { margin: 0; list-style: none; line-height: inherit; } .tg-navigation > ul { width: 100%; float: left; text-align:center; padding:0; } .tg-navigation ul li { line-height: inherit; list-style-type: none; } li.menu-item-has-children { position: relative; } li.menu-item-has-mega-menu { position: static; } li.menu-item-has-children > a:before, li.menu-item-has-mega-menu > a:before { top: 0; right: 10px; content: '\\f107'; position: absolute; font-size: inherit; line-height: inherit; font-family: 'FontAwesome'; } .sub-menu li.menu-item-has-children > a:after { top: 0; right: 10px; content: '\\f105'; position: absolute; font-size: inherit; line-height: inherit; font-family: 'FontAwesome'; } .tg-navigation ul li .sub-menu li.current-menu-item > a { color: #333; } .tg-navigation ul li .sub-menu li.current-menu-item > a:before { height: 100%; } .tg-navigation > ul > li { display: inline-block; } .tg-navigation ul li a { color: #666; display: block; padding: 0 25px; position: relative; line-height: inherit; } .tg-navigation > ul > li > a { color: #333; z-index: 2; } .tg-navigation > ul > li:last-child > .sub-menu { right: 0; left: auto; } .tg-navigation > ul > li:last-child > .sub-menu .sub-menu { right: 100%; left: auto; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav id="tg-nav" class="tg-nav"> <div id="tg-navigation" class="navbar-collapse tg-navigation"> <ul> <li> <a href="javascript:void(0);">Home</a> </li> <li> <a href="results.html">About</a> </li> <li> <a href="javascript:void(0);">Packages</a> </li> <li> <a href="javascript:void(0);">Destination</a> </li> <li> <a href="javascript:void(0);">Gallery</a> </li> <li> <a href="javascript:void(0);">Blog</a> </li> <li> <a href="javascript:void(0);">Contact us</a> </li> </ul> </div> </nav> 

Answer 2

将此CSS规则应用于要素

.tg-nav {
    z-index: 2;
    float: left;
    width: 100%;
    text-align: center;
    font: 400 13px/40px 'Open Sans', Arial, Helvetica, sans-serif;
}
.tg-navigation > ul {
    width: auto;
    float: none;
    display: inline-block;
    margin: 0 auto;
}

Answer 3

一种方法是使用flexbox。 新增中

display: flex;
justify-content: center;

如果您删除width: 100%和float: left ，则将导航栏float: left 。

更新的小提琴： https : //jsfiddle.net/103kbsh6/5/

Answer 4

   .tg-navigationarea {
     width: 100%;
     float: left;
     position: relative;
     background: #000;
     }

.tg-nav {
  z-index: 2;
  float: left;
  text-transform: uppercase;
  font: 400 13px/40px 'Open Sans', Arial, Helvetica, sans-serif;
}

.tg-navigation {
  width: 100%;
  float: left;
  padding: 0;
  line-height: inherit;
}



 .tg-navigation ul {
  margin: 0;
  list-style: none;
  line-height: inherit;
}

.tg-navigation>ul {
  width: 100%;
  float: left;
Text-align:center
}

.tg-navigation ul li {
  line-height: inherit;
  list-style-type: none;
float:none;
display:inline-block
}

Answer 5

要使此列表居中，您需要添加的所有内容是：

.tg-nav {
  width: 100%:
}

.tg-navigation {
  width: 100%;
}

.tg-navigation ul {
  display: inline-block;
}

除此之外，所有float: left是怎么回事float: left ？ 如果您希望元素居中，请使用float: left ，除了list-items之外，我会避免。

我更新了您的FIDDLE