Question

第一次在这里，我也是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>

Answer 1

使用这篇文章作为指南：How to horizontally center an unordered list of unknown width?

Answer 2

只是一个建议，你可以使用nav标签而不是列表：

<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告诉'文本对齐中心'告诉内部元素居中。

赋予LI元素相同的宽度是另一个故事，但你应该能够弄明白，例如：链接数/ 100 = x％。

更新：

我意识到你想要导航栏的中心，而不是内容..我的不好。

CSS：

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

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

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

Answer 3

请参阅代码段。

我删除了margin-XXXX个命令，使用margin: 0 auto;来集中阻止，更正了header的{{1}}，从width规则中删除了padding（将其设置为零），将列表元素显示更改为ul。

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

inline-block

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

无法确定如何使导航栏居中

3 个答案: