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;提交给ul代码。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

将此css规则应用于elemnts

.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，则会将您的导航栏居中。

更新小提琴：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，当然除了list-items。

我更新了您的FIDDLE

如何将导航栏对齐到中心

5 个答案: