如何讓導航欄中的所有內容在一行中居中

我有一個使用CSS，HTML和jQuery的導航欄。我在內容對齊方面遇到問題。我希望所有這一切都在一條線上並以中心爲中心。以下是我的代碼的CSS我試圖集中導航欄的所有內容，並試圖居中導航欄本身，但沒有這樣做。如何讓導航欄中的所有內容在一行中居中

* { 
     margin: 0; 
     padding: 0; 
     text-decoration: none 
    } 
    body { 
     background: #555; 
    } 
    header { 
     position: relative; 
     width: 100%; 
     background: #333; 
    } 
    .logo { 
     position: relative; 
     z-index: 123; 
     padding: 10px; 
     font: 18px verdana; 
     color: #6DDB07; 
     float: left; 
     width: 15% 
    } 
    .logo a { 
     color: #6DDB07; 
    } 
    nav { 
     position: relative; 
     width: 980px; 
     margin: 0 auto; 
    } 
    #cssmenu, 
    #cssmenu ul, 
    #cssmenu ul li, 
    #cssmenu ul li a, 
    #cssmenu #head-mobile { 
     border: 0; 
     list-style: none; 
     line-height: 1; 
     display: block; 
     position: relative; 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     box-sizing: border-box 
    } 
    #cssmenu:after, 
    #cssmenu > ul:after { 
     content: "."; 
     display: block; 
     clear: both; 
     visibility: hidden; 
     line-height: 0; 
     height: 0 
    } 
    #cssmenu #head-mobile { 
     display: none 
    } 
    #cssmenu { 
     font-family: sans-serif; 
     background: #333 
    } 
    #cssmenu > ul > li { 
     float: left 
    } 
    #cssmenu > ul > li > a { 
     padding: 17px; 
     font-size: 12px; 
     letter-spacing: 1px; 
     text-decoration: none; 
     color: #ddd; 
     font-weight: 700; 
    } 
    #cssmenu > ul > li:hover > a, 
    #cssmenu ul li.active a { 
     color: #fff 
    } 
    #cssmenu > ul > li:hover, 
    #cssmenu ul li.active:hover, 
    #cssmenu ul li.active, 
    #cssmenu ul li.has-sub.active:hover { 
     background: #448D00!important; 
     -webkit-transition: background .3s ease; 
     -ms-transition: background .3s ease; 
     transition: background .3s ease; 
    } 
    #cssmenu > ul > li.has-sub > a { 
     padding-right: 30px 
    } 
    #cssmenu > ul > li.has-sub > a:after { 
     position: absolute; 
     top: 22px; 
     right: 11px; 
     width: 8px; 
     height: 2px; 
     display: block; 
     background: #ddd; 
     content: '' 
    } 
    #cssmenu > ul > li.has-sub > a:before { 
     position: absolute; 
     top: 19px; 
     right: 14px; 
     display: block; 
     width: 2px; 
     height: 8px; 
     background: #ddd; 
     content: ''; 
     -webkit-transition: all .25s ease; 
     -ms-transition: all .25s ease; 
     transition: all .25s ease 
    } 
    #cssmenu > ul > li.has-sub:hover > a:before { 
     top: 23px; 
     height: 0 
    } 
    #cssmenu ul ul { 
     position: absolute; 
     left: -9999px 
    } 
    #cssmenu ul ul li { 
     height: 0; 
     -webkit-transition: all .25s ease; 
     -ms-transition: all .25s ease; 
     background: #333; 
     transition: all .25s ease 
    } 
    #cssmenu ul ul li:hover {} #cssmenu li:hover > ul { 
     left: auto 
    } 
    #cssmenu li:hover > ul > li { 
     height: 35px 
    } 
    #cssmenu ul ul ul { 
     margin-left: 100%; 
     top: 0 
    } 
    #cssmenu ul ul li a { 
     border-bottom: 1px solid rgba(150, 150, 150, 0.15); 
     padding: 11px 15px; 
     width: 170px; 
     font-size: 12px; 
     text-decoration: none; 
     color: #ddd; 
     font-weight: 400; 
    } 
    #cssmenu ul ul li:last-child > a, 
    #cssmenu ul ul li.last-item > a { 
     border-bottom: 0 
    } 
    #cssmenu ul ul li:hover > a, 
    #cssmenu ul ul li a:hover { 
     color: #fff 
    } 
    #cssmenu ul ul li.has-sub > a:after { 
     position: absolute; 
     top: 16px; 
     right: 11px; 
     width: 8px; 
     height: 2px; 
     display: block; 
     background: #ddd; 
     content: '' 
    } 
    #cssmenu ul ul li.has-sub > a:before { 
     position: absolute; 
     top: 13px; 
     right: 14px; 
     display: block; 
     width: 2px; 
     height: 8px; 
     background: #ddd; 
     content: ''; 
     -webkit-transition: all .25s ease; 
     -ms-transition: all .25s ease; 
     transition: all .25s ease 
    } 
    #cssmenu ul ul > li.has-sub:hover > a:before { 
     top: 17px; 
     height: 0 
    } 
    #cssmenu ul ul li.has-sub:hover, 
    #cssmenu ul li.has-sub ul li.has-sub ul li:hover { 
     background: #363636; 
    } 
    #cssmenu ul ul ul li.active a { 
     border-left: 1px solid #333 
    } 
    #cssmenu > ul > li.has-sub > ul > li.active > a, 
    #cssmenu > ul ul > li.has-sub > ul > li.active> a { 
     border-top: 1px solid #333 
    } 
    @media screen and (max-width: 1000px) { 
     .logo { 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 46px; 
      text-align: center; 
      padding: 10px 0 0 0; 
      float: none 
     } 
     .logo2 { 
      display: none 
     } 
     nav { 
      width: 100%; 
     } 
     #cssmenu { 
      width: 100% 
     } 
     #cssmenu ul { 
      width: 100%; 
      display: none 
     } 
     #cssmenu ul li { 
      width: 100%; 
      border-top: 1px solid #444 
     } 
     #cssmenu ul li:hover { 
      background: #363636; 
     } 
     #cssmenu ul ul li, 
     #cssmenu li:hover > ul > li { 
      height: auto 
     } 
     #cssmenu ul li a, 
     #cssmenu ul ul li a { 
      width: 100%; 
      border-bottom: 0 
     } 
     #cssmenu > ul > li { 
      float: none 
     } 
     #cssmenu ul ul li a { 
      padding-left: 25px 
     } 
     #cssmenu ul ul li { 
      background: #333!important; 
     } 
     #cssmenu ul ul li:hover { 
      background: #363636!important 
     } 
     #cssmenu ul ul ul li a { 
      padding-left: 35px 
     } 
     #cssmenu ul ul li a { 
      color: #ddd; 
      background: none 
     } 
     #cssmenu ul ul li:hover > a, 
     #cssmenu ul ul li.active > a { 
      color: #fff 
     } 
     #cssmenu ul ul, 
     #cssmenu ul ul ul { 
      position: relative; 
      left: 0; 
      width: 100%; 
      margin: 0; 
      text-align: left 
     } 
     #cssmenu > ul > li.has-sub > a:after, 
     #cssmenu > ul > li.has-sub > a:before, 
     #cssmenu ul ul > li.has-sub > a:after, 
     #cssmenu ul ul > li.has-sub > a:before 
     { 
      display: none 
     } 
     #cssmenu #head-mobile { 
      display: block; 
      padding: 23px; 
      color: #ddd; 
      font-size: 12px; 
      font-weight: 700 
     } 
     .button { 
      width: 55px; 
      height: 46px; 
      position: absolute; 
      right: 0; 
      top: 0; 
      cursor: pointer; 
      z-index: 12399994; 
     } 
     .button:after { 
      position: absolute; 
      top: 22px; 
      right: 20px; 
      display: block; 
      height: 4px; 
      width: 20px; 
      border-top: 2px solid #dddddd; 
      border-bottom: 2px solid #dddddd; 
      content: '' 
     } 
     .button:before { 
      -webkit-transition: all .3s ease; 
      -ms-transition: all .3s ease; 
      transition: all .3s ease; 
      position: absolute; 
      top: 16px; 
      right: 20px; 
      display: block; 
      height: 2px; 
      width: 20px; 
      background: #ddd; 
      content: '' 
     } 
     .button.menu-opened:after { 
      -webkit-transition: all .3s ease; 
      -ms-transition: all .3s ease; 
      transition: all .3s ease; 
      top: 23px; 
      border: 0; 
      height: 2px; 
      width: 19px; 
      background: #fff; 
      -webkit-transform: rotate(45deg); 
      -moz-transform: rotate(45deg); 
      -ms-transform: rotate(45deg); 
      -o-transform: rotate(45deg); 
      transform: rotate(45deg) 
     } 
     .button.menu-opened:before { 
      top: 23px; 
      background: #fff; 
      width: 19px; 
      -webkit-transform: rotate(-45deg); 
      -moz-transform: rotate(-45deg); 
      -ms-transform: rotate(-45deg); 
      -o-transform: rotate(-45deg); 
      transform: rotate(-45deg) 
     } 
     #cssmenu .submenu-button { 
      position: absolute; 
      z-index: 99; 
      right: 0; 
      top: 0; 
      display: block; 
      border-left: 1px solid #444; 
      height: 46px; 
      width: 46px; 
      cursor: pointer 
     } 
     #cssmenu .submenu-button.submenu-opened { 
      background: #262626 
     } 
     #cssmenu ul ul .submenu-button { 
      height: 34px; 
      width: 34px 
     } 
     #cssmenu .submenu-button:after { 
      position: absolute; 
      top: 22px; 
      right: 19px; 
      width: 8px; 
      height: 2px; 
      display: block; 
      background: #ddd; 
      content: '' 
     } 
     #cssmenu ul ul .submenu-button:after { 
      top: 15px; 
      right: 13px 
     } 
     #cssmenu .submenu-button.submenu-opened:after { 
      background: #fff 
     } 
     #cssmenu .submenu-button:before { 
      position: absolute; 
      top: 19px; 
      right: 22px; 
      display: block; 
      width: 2px; 
      height: 8px; 
      background: #ddd; 
      content: '' 
     } 
     #cssmenu ul ul .submenu-button:before { 
      top: 12px; 
      right: 16px 
     } 
     #cssmenu .submenu-button.submenu-opened:before { 
      display: none 
     } 
     #cssmenu ul ul ul li.active a { 
      border-left: none 
     } 
     #cssmenu > ul > li.has-sub > ul > li.active > a, 
     #cssmenu > ul ul > li.has-sub > ul > li.active > a { 
      border-top: none 
     }

以下是HTML代碼我的代碼我的目標是在中心屏幕上我的導航欄。我將不勝感激任何形式的幫助！

<nav id='cssmenu'> 
<div class="logo"><a href="#">something </a></div> 
<div id="head-mobile"></div> 
<div class="button"></div> 
<ul> 
<li><a href='#'>something</a></li> 
<li><a href='#'>something</a> 
    <ul> 
     <li><a href="#">something</a> 
     </li> 
     <li><a href="#">something</a> 
     </li> 
    </ul> 
</li> 
<li><a href="#">something</a> 
<ul> 
     <li><a href="#">something</a></li> 
</ul> 
</li> 
<li ><a href="#">something</a> 
<ul> 
<li><a href="#">something</a></li> 
      <li><a href="#">something</a></li> 
      <li><a href="#">something</a></li> 
      <li><a href="#">something</a></li> 
      <li><a href="#">something</a></li> 
      <li><a href="#">something</a></li> 
      <li><a href="#">something</a></li> 
      <li><a href="#">something</a></li> 
      <li><a href="#">something</a></li> 
      <li><a href="#">something</a></li> 
      <li><a href="#">something</a></li> 
      <li><a href="#">something</a></li> 
      <li><a href="#">something</a></li> 
      <li><a href="#">something</a></li> 
      <li><a href="#">something</a></li> 
</ul> 
</li> 
<li><a href="#">something</a> 
    <ul> 
     <li><a href="#">something</a></li> 
    </ul> 
</li> 
<li><a href="#">something</a> 
<ul> 
    <li><a href="#">something</a></li> 
      <li><a href="#">something</a></li> 
      <li><a href="#">something</a></li> 
      <li><a href="#">something</a></li> 
      <li><a href="#">something</a></li> 
    </ul> 
    </li> 
<li><a href="#">something</a></li> 

</li> 
</ul> 
</nav>

觀Plunkr https://plnkr.co/edit/YkuipAhi9a6rSqnKRMMv

來源

2017-08-11 fff

我只是增加了一個plunkr你的問題，如果你查看全屏（擴大到全屏幕預覽），導航欄集中在屏幕上。我不確定什麼不起作用 - 你能澄清嗎？ https://plnkr.co/edit/YkuipAhi9a6rSqnKRMMv –

@ StephenR.Smith我似乎無法找到左側和右側填充我進入了導航欄 – fff

你的導航應用了以下樣式：

nav { 
    position: relative; 
    width: 980px; 
    margin: 0 auto; 
}

即給予包含所有菜單項固定寬度的整個導航DIV 980像素，然後將左右邊距設置爲自動，有效地將其居中在屏幕上。這就是導航的左側和右側似乎填充的地方，它實際上是自動保證金。

如果您希望菜單填滿屏幕，但菜單內容要居中，您可以將菜單嵌套在單獨的div中，並使用＃333填充樣式設置外部容器，並使其寬度達到100％它填滿了屏幕。我已經修改了導航風格，添加了cssmenu.nav容器風格：

nav { 
    position: relative; 
    margin: 0 auto; 
    width: 100%; 
    background: #333; 
} 

#cssmenu.nav-container { 
    position: relative; 
    margin: 0 auto; 
    width: 980px; 
}

然後改變了HTML：

<body> 
<nav> 
    <div class="nav-container" id='cssmenu'> 
     <div class="logo"> 
      <a href="#">something </a> 
     </div> 
     <div id="head-mobile"> 
     </div> 
     <div class="button"> 
     </div> 
     <ul> 
      <li><a href='#'>something</a></li> 
      <li><a href='#'>something</a> 
      <ul> 
       <li><a href="#">something</a> </li> 
       <li><a href="#">something</a> </li> 
      </ul> 
      </li> 
      <li><a href="#">something</a> 
      <ul> 
       <li><a href="#">something</a></li> 
      </ul> 
      </li> 
      <li><a href="#">something</a> 
      <ul> 
       <li><a href="#">something</a></li> 
       <li><a href="#">something</a></li> 
       <li><a href="#">something</a></li> 
       <li><a href="#">something</a></li> 
       <li><a href="#">something</a></li> 
       <li><a href="#">something</a></li> 
       <li><a href="#">something</a></li> 
       <li><a href="#">something</a></li> 
       <li><a href="#">something</a></li> 
       <li><a href="#">something</a></li> 
       <li><a href="#">something</a></li> 
       <li><a href="#">something</a></li> 
       <li><a href="#">something</a></li> 
       <li><a href="#">something</a></li> 
       <li><a href="#">something</a></li> 
      </ul> 
      </li> 
      <li><a href="#">something</a> 
      <ul> 
       <li><a href="#">something</a></li> 
      </ul> 
      </li> 
      <li><a href="#">something</a> 
      <ul> 
       <li><a href="#">something</a></li> 
       <li><a href="#">something</a></li> 
       <li><a href="#">something</a></li> 
       <li><a href="#">something</a></li> 
       <li><a href="#">something</a></li> 
      </ul> 
      </li> 
      <li><a href="#">something</a></li> 
      </li> 
     </ul> 
    </div> 
</nav> 
</body>

請注意，我已經從導航刪除cssmenu ID並將其添加到一個帶有nav-container類的嵌套div。 Nav獲得100％寬度和灰色填充，新的導航容器獲得980像素的固定寬度和自動邊距，將其集中在屏幕上。

這裏有一個更新的Plnkr https://plnkr.co/edit/U8yEQfqN2zcPWWyAZOsv

來源

2017-08-11 06:52:23

在導航欄中的所有貴麗項目，採用浮動：左;財產，使他們集中使用這個

CSS

#cssmenu > ul > li{ 
float:left; /*remove float*/ 
display:inline-block; 
} 

#cssmenu{ 
text-align:center; 
}

來源

2017-08-11 03:23:03

如何讓導航欄中的所有內容在一行中居中

回答

相關問題