不知道如何使导航栏居中答案

【问题标题】：Can't figure how to center the nav bar不知道如何使导航栏居中
【发布时间】：2015-02-09 08:09:11
【问题描述】：

第一次来这里，我也是 HTML/CSS 的新手。我刚刚为学校开始了这个项目，我对这个导航栏没有居中感到沮丧。它实际上看起来以我的 19 英寸显示器为中心，但更大的是在左侧。我如何解决它？谢谢

body {background-color:grey; text-align:center; max-width: 80%; }

header {background-color:white; margin-left:31%; width: 673px}

ul {float: left; width: 100%;  margin-left:20%; margin-top: 1px; margin-bottom: -1px; list-style-type: none; }

a {float: left; width: 96px; text-decoration: none; color: white; background-color: #303030; padding: 3px 9px;
border-right: 1px solid white; border-style: ridge}


.nav { position: relative; left: 0%; }

section {color: #745e4e  ;   text-align: justify; 
width:95%; font-size: 18px; line-height: 90%; word-spacing: 1px; background-color: #FFF4E8
; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-style: solid;
margin-left: 13.5%; 
}

hr {margin-left: -10%; width: 134%; border-style: ridge;}
#arrow {margin:0; position: absolute; left: 16%; top: 29.5%; }

<html>

<head>
  <title>Valve</title>
  <link rel="stylesheet" type="text/css" href="css.css">
  <meta http-equiv="Content-Type" content="text / html; charset = utf-8" />

</head>

<body>
  <header>
    <img src="images/valve-logo.png" style="width:700px;height:190px">
  </header>
  <div id="wrapper">
    <ul class="nav">
      <li><a href="history.html">История</a>
      </li>
      <li><a href="#">Link two</a>
      </li>
      <li><a href="#">Link three</a>
      </li>
      <li><a href="#">Link four</a>
      </li>
      <li><a href="#">Link five</a>
      </li>
      <li><a href="#">Link six</a>
      </li>
      <li><a href="#">Link seven</a>
      </li>
    </ul>
  </div>
  <hr>
  <section>
    <p>Valve Corporation (позната още като Valve Software или по-кратко Valve) е американска компания за разработване на видеоигри и дистрибуция на дигитални компютърни стоки, базирана в Белвю, Вашингтон, САЩ. Основана е през 1996 г. от бившите служители
      на Microsoft, Гейб Нюъл и Майк Харингтън. Компанията е известна с изключително успешния си и критично аплодиран първи продукт — Half-Life, пуснат през ноември 1998 г. Също така е позната и тяхната социална мрежа за дистрибуция на видеоигри — Steam
      и разработването на Source Engine, използван във всеки техен продукт от 2004 г. насам.
    </p>





  </section>
  </div>
</body>
<html>

【问题讨论】：

标签： html css center navbar

【解决方案1】：

参见 sn-p。

我删除了margin-XXXX 命令，使用margin: 0 auto; 集中块，更正了header 的width，从ul 规则中删除了padding（将其设置为零），将列表元素显示更改为@ 987654327@.

唯一不会随着调整大小而改变的是标题的图像宽度，但我认为如果需要，您可以这样做。

body {background-color:grey; margin: 0 auto; max-width: 80%; }

header {background-color:white; margin: 0 auto; width: 700px;}

ul {float: left; width: 100%; text-align: center; list-style-type: none; padding: 0;}
 
ul li {display: inline-block;}   
  
a {float: left; width: 96px; text-decoration: none; color: white; background-color: #303030; padding: 3px 9px;
border-right: 1px solid white; border-style: ridge}


.nav { position: relative; left: 0%; }

section {color: #745e4e  ;   text-align: justify; 
font-size: 18px; line-height: 90%; word-spacing: 1px; background-color: #FFF4E8
; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-style: solid;
}

hr {border-style: ridge;}
#arrow {margin:0; position: absolute; left: 16%; top: 29.5%; }

<html>

<head>
  <title>Valve</title>
  <link rel="stylesheet" type="text/css" href="css.css">
  <meta http-equiv="Content-Type" content="text / html; charset = utf-8" />

</head>

<body>
  <header>
    <img src="images/valve-logo.png" style="width:700px;height:190px">
  </header>
  <div id="wrapper">
    <ul class="nav">
      <li><a href="history.html">История</a>
      </li>
      <li><a href="#">Link two</a>
      </li>
      <li><a href="#">Link three</a>
      </li>
      <li><a href="#">Link four</a>
      </li>
      <li><a href="#">Link five</a>
      </li>
      <li><a href="#">Link six</a>
      </li>
      <li><a href="#">Link seven</a>
      </li>
    </ul>
  </div>
  <hr>
  <section>
    <p>Valve Corporation (позната още като Valve Software или по-кратко Valve) е американска компания за разработване на видеоигри и дистрибуция на дигитални компютърни стоки, базирана в Белвю, Вашингтон, САЩ. Основана е през 1996 г. от бившите служители
      на Microsoft, Гейб Нюъл и Майк Харингтън. Компанията е известна с изключително успешния си и критично аплодиран първи продукт — Half-Life, пуснат през ноември 1998 г. Също така е позната и тяхната социална мрежа за дистрибуция на видеоигри — Steam
      и разработването на Source Engine, използван във всеки техен продукт от 2004 г. насам.
    </p>





  </section>
  </div>
</body>
<html>

【讨论】：

谢谢 :) 出于某种原因，margin: 0 auto 之前没有为我完成这项工作，但你修复了它 :)

【解决方案2】：

以这篇文章为指导：How to horizontally center an unordered list of unknown width?

【讨论】：

【解决方案3】：

只是一个建议，您可以只使用导航标签而不是列表：

<nav>
<a href="#" title="#">My Link</a>
</nav>

为确保导航内容保持内联，请务必添加注释行：

<nav>
<a href="#" title="#">Test 1</a><!--
--><a href="#" title="#">Test 2</a>
</nav>

一个例子回答你的问题：

<ul style="width:100%;text-align:center;display:inline">
<li style="width:25%">Stuff</li>
<li style="width:25%">Stuff</li>
<li style="width:25%">Stuff</li>
<li style="width:25%">Stuff</li>
</ul>

告诉 UL 'text align center' 告诉里面的元素居中。

赋予 LI 元素相等的宽度是另一回事，但您应该能够弄清楚这一点，例如：链接数 / 100 = x%。

更新：

我意识到你想将导航栏居中，而不是内容.. 我的错。

CSS：

ul{ width:500px; margin:0 auto; }

编辑：我有时间做一个小提琴，这解决了一切；这里：

http://jsfiddle.net/scott88/hmaLb5mf/

【讨论】：

使用 ul{ width:500px;边距：0 自动； } 破坏导航栏。我需要导航栏本身居中，但我不知道，因为它在我的小显示器上看起来不错。当我将它发送给朋友时，他会在左侧看到更多。