Question

我正在尝试将我的导航元素设为中心，但它不适用于旧版本的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";
}

Answer 1

有许多方法可以集中元素：

保证金方式：

设置宽度或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。我知道，根据经验，它可以正常工作，但如果你想要向导航栏添加一个下拉菜单，那就更难了。

Answer 2

使用以下内容：

text-align: center;

而不是

margin 0 auto;

Sample Fiddle

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

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

<script src='http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js' type='text/javascript'></script>

Answer 3

由于它是一个块元素，它将在整个页面上传播100％，尝试给它一个宽度

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

Answer 4

如果没有指定宽度，

margin: 0 auto;没有意义。

Answer 5

使用：

  #Nav 
  {
     margin-left:auto;
     margin-right:auto;
     width: 12em;
     font-size: 40px;
     color: #22b14c;
     font-family: "Papyrus";
  }

为什么我的导航元素不会转到中心或更改样式？

5 个答案: