0

我试图让我的导航元素居中，但它不适用于旧版本的 Internet Explorer 或 Chrome。它也不会改变风格。我怎样才能让它集中和改变？这是代码：

导航：

<nav id="Nav">
    <a href="TMR Library.html">Library</a> |
    <a href="TMR Contact.html">Contact</a> |
    <a href="TMR About.html">About</a>
</nav>

CSS

#Nav {
    margin:0 auto;
    font-size: 40px;
    color: #22b14c;
    font-family: "Papyrus";
}
4

5 回答 5

10

有很多方法可以使元素居中：

保证金方式：

使用设定的宽度，或者display: inline-block;您可以使用：

margin-left: auto;
margin-right: auto;

text-align方式：

使用设置的宽度，或者display: inline-block;您可以将其添加到父级：

text-align: center;

绝对方式：

position: absolute;
left: 50%;
margin-left: width/2;

或者

position: absolute;
left: 50%;
transform: translate(0, -50%);

也不要太担心 ie7 及以下，因为大多数人使用更高版本的 ie 或不同的浏览器，尽管这应该可以工作到 ie6

另一件需要注意的事情是你想为你的导航栏使用 ul。我知道，根据经验，它工作得很好，但如果你想向导航栏添加一个下拉菜单，那就更难了。

于 2013-10-07T06:35:59.413 回答
2

使用以下内容：

text-align: center;

代替

margin 0 auto;

样品小提琴

注意：我的假设是您不想指定宽度。否则，您可以使用margin其他答案中已经说明的。

编辑：要使用<nav>较低版本的 IE 和其他 HTML5 标签，您可以使用 HTML5shiv.js（通过包含以下脚本）。

<script src='http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js' type='text/javascript'></script>
于 2013-10-07T06:29:43.593 回答
0

由于它是一个块元素，它将 100% 分布在整个页面上，请尝试给它一个宽度

#Nav {
display:Block;
width:500px;
margin:0 auto;
font-size: 40px;
color: #22b14c;
font-family: "Papyrus";
}
于 2013-10-07T06:31:45.597 回答
0

margin: 0 auto;不指定宽度没有意义。

于 2013-10-07T06:36:54.753 回答
0

采用：

  #Nav 
  {
     margin-left:auto;
     margin-right:auto;
     width: 12em;
     font-size: 40px;
     color: #22b14c;
     font-family: "Papyrus";
  }
于 2013-10-07T06:41:42.157 回答