entityMap|blocks|key|a4mlv|text|将display:inline-block赋予li，将text-align:center;+padding:0;赋予ul标记。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|a8m4f|​|32alk|.tg-navigationarea+{
++width:+100%25;
++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%25;
++float:+left;
++padding:+0;
++line-height:+inherit;
}

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

.tg-navigation+>+ul+{
++width:+100%25;
++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%25;
}

.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%25;
++left:+auto;
}|code-block|syntax|javascript|9nre2|<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>|cnojh|f6r47^0|1|K|N|2|R|T|1M|2|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|R|9|@$A|S|B|T|C|D]|$A|U|B|V|C|D]|$A|W|B|X|C|D]|$A|Y|B|Z|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|10|9|@]|E|@]|F|$]]|$2|I|4|J|6|K|8|11|9|@]|E|@]|F|$L|M]]|$2|N|4|O|6|K|8|12|9|@]|E|@]|F|$L|M]]|$2|P|4|H|6|7|8|13|9|@]|E|@]|F|$]]|$2|Q|4|-4|6|7|8|14|9|@]|E|@]|F|$]]]]

<p>Give <code>display:inline-block</code> to <code>li</code> and <code>text-align:center; padding:0;</code> to <code>ul</code> tag.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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 &gt; 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 &gt; a:before,
li.menu-item-has-mega-menu &gt; 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 &gt; 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 &gt; a {
  color: #333;
}

.tg-navigation ul li .sub-menu li.current-menu-item &gt; a:before {
  height: 100%;
}

.tg-navigation &gt; ul &gt; li {
  display: inline-block;
}

.tg-navigation ul li a {
  color: #666;
  display: block;
  padding: 0 25px;
  position: relative;
  line-height: inherit;
}

.tg-navigation &gt; ul &gt; li &gt; a {
  color: #333;
  z-index: 2;
}

.tg-navigation &gt; ul &gt; li:last-child &gt; .sub-menu {
  right: 0;
  left: auto;
}

.tg-navigation &gt; ul &gt; li:last-child &gt; .sub-menu .sub-menu {
  right: 100%;
  left: auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;nav id="tg-nav" class="tg-nav"&gt;
  &lt;div id="tg-navigation" class="navbar-collapse tg-navigation"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;a href="javascript:void(0);"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="results.html"&gt;About&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="javascript:void(0);"&gt;Packages&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="javascript:void(0);"&gt;Destination&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="javascript:void(0);"&gt;Gallery&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="javascript:void(0);"&gt;Blog&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="javascript:void(0);"&gt;Contact us&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/nav&gt;</code></pre>
</div>
</div>
</p>


entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://jsfiddle.net/103kbsh6/5/|blocks|key|fopsm|text|其中一种方法是使用flexbox。添加|unstyled|depth|inlineStyleRanges|entityRanges|5cvur|display:+flex;
justify-content:+center;|code-block|syntax|javascript|a0pp9|如果您删除width:+100%25和float:+left，将使导航栏居中。|offset|length|style|CODE|cm4im|更新的提琴：https://jsfiddle.net/103kbsh6/5/|b00m7^0|0|0|5|B|H|B|0|6|W|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|W|G|@]|H|@]|6|$]]|$A|I|C|J|2|K|F|X|G|@]|H|@]|6|$L|M]]|$A|N|C|O|2|E|F|Y|G|@$P|Z|Q|10|R|S]|$P|11|Q|12|R|S]]|H|@]|6|$]]|$A|T|C|U|2|E|F|13|G|@]|H|@$P|14|Q|15|A|16]]|6|$]]|$A|V|C|-4|2|E|F|17|G|@]|H|@]|6|$]]]]

<p>One of the ways to do this is using flexbox. Adding</p>

<pre><code>display: flex;
justify-content: center;
</code></pre>

<p>Will center your navbar, if you remove the <code>width: 100%</code> and the <code>float: left</code>.</p>

<p>Updated Fiddle: <a href="https://jsfiddle.net/103kbsh6/5/" rel="nofollow noreferrer">https://jsfiddle.net/103kbsh6/5/</a></p>


entityMap|blocks|key|fqepu|text|将此css规则应用于元素|type|unstyled|depth|inlineStyleRanges|entityRanges|data|19r3l|.tg-nav+{
++++z-index:+2;
++++float:+left;
++++width:+100%25;
++++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;
}|code-block|syntax|javascript|b0fjt^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|J|9|@]|A|@]|B|$F|G]]|$2|H|4|-4|6|7|8|K|9|@]|A|@]|B|$]]]]

<p>apply this css rule to elemnts</p>

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


entityMap|blocks|key|8hjd|text|+++.tg-navigationarea+{
+++++width:+100%25;
+++++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%25;
++float:+left;
++padding:+0;
++line-height:+inherit;
}



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

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

.tg-navigation+ul+li+{
++line-height:+inherit;
++list-style-type:+none;
float:none;
display:inline-block
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|ft01q|unstyled^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$C|D]]|$2|E|4|-4|6|F|8|H|9|@]|A|@]|B|$]]]]

<pre><code>   .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&gt;ul {
  width: 100%;
  float: left;
Text-align:center
}

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


entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://jsfiddle.net/103kbsh6/6/|blocks|key|a0ha8|text|要将此列表居中，您只需添加以下内容：|unstyled|depth|inlineStyleRanges|entityRanges|c5cit|.tg-nav+{
++width:+100%25:
}

.tg-navigation+{
++width:+100%25;
}

.tg-navigation+ul+{
++display:+inline-block;
}|code-block|syntax|javascript|4444r|除此之外，这些float:+left是怎么回事？如果希望元素居中，我会避免使用float:+left，当然list-items除外。|offset|length|style|CODE|bdmte|我更新了你的FIDDLE|5t1qu^0|0|0|7|B|13|B|1H|A|0|6|6|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|W|G|@]|H|@]|6|$]]|$A|I|C|J|2|K|F|X|G|@]|H|@]|6|$L|M]]|$A|N|C|O|2|E|F|Y|G|@$P|Z|Q|10|R|S]|$P|11|Q|12|R|S]|$P|13|Q|14|R|S]]|H|@]|6|$]]|$A|T|C|U|2|E|F|15|G|@]|H|@$P|16|Q|17|A|18]]|6|$]]|$A|V|C|-4|2|E|F|19|G|@]|H|@]|6|$]]]]

<p>To center this list, all you need to add is:</p>

<pre><code>.tg-nav {
  width: 100%:
}

.tg-navigation {
  width: 100%;
}

.tg-navigation ul {
  display: inline-block;
}
</code></pre>

<p>Besides that, what's up with all the <code>float: left</code>? If you want elements to center, using <code>float: left</code> is what I would avoid, except of course for the <code>list-items</code>.</p>

<p>I updated your <a href="https://jsfiddle.net/103kbsh6/6/" rel="nofollow noreferrer">FIDDLE</a></p>


<p>I want to know how to align navbar contents to center , here is the code that i am using . Actually i don't know what is the problem with the code any help would be greatly appreciated.</p>

<p><a href="https://jsfiddle.net/sjs96/103kbsh6/1/" rel="nofollow noreferrer">Fiddle</a></p>

<pre><code>.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&gt;ul {
  width: 100%;
  float: left;
}

.tg-navigation ul li {
  line-height: inherit;
  list-style-type: none;
}
</code></pre>


How to align navbar to center

 我想知道如何将导航栏内容居中对齐，这是我正在使用的代码。实际上，我不知道代码有什么问题，如果有任何帮助，我将不胜感激。 Fiddle .tg-navigationarea {  width: 100%;  float: left;  position: relative;  background: #000;}.tg...

问如何将导航栏居中对齐
EN

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将导航栏居中对齐EN