Question

为什么我的导航栏不在中心？我也在主.html文本上试过< center> < /center>，但无济于事。

    #nav ul {
      text-align: center;
      list-style-type: none;
    }
    #nav li {
      float: left;
    }
    #nav a:link,
    a:visited {
      margin-left: auto;
      margin-right: auto;
      display: block;
      width: 120px;
      font-weight: bold;
      color: #FFFFFF;
      background-color: #21AEB8;
      text-align: center;
      padding: 4px;
      text-decoration: none;
      text-transform: uppercase;
    }
    #nav a:hover,
    a:active {
      background-color: #2BC1CC;
    }

<link rel="stylesheet" href="style.css">

<head>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <title>Stats Apps</title>
</head>

<body>
  <img src="logo.png" />
  <center>
    <h1> Biostatistics </h1> 
  </center>
  <div id="nav">
    <ul>

      <li><a href="#home">Home</a>
      </li>
      <li><a href="#news">News</a>
      </li>
      <li><a href="#contact">Contact</a>
      </li>
      <li><a href="#about">About</a>
      </li>
    </ul>
  </div>

Answer 1

浮动元素将不遵守text-align: center;规则。

如果你知道链接的数量（LI＆＃39; s），那么你可以给你的UL一个特定的宽度，然后用margin: 0 auto;将整个列表作为中心。

更好的选择（在我看来） - 是在你的LI上使用display: inline-block;代替float: left;。

然而，此方法存在一些兼容性问题，但它确实支持IE8及更高版本，这占据了平均网站流量的大约95％或更多。（取决于您的受众）

要实现此目的，只需更改以下规则......

#nav li {   
   float: left;
}

要...

#nav li {   
   display: inline-block;
}

更多信息......

以下是Floats

上CSS3 Wiki的链接

这是display: inline-block;

上CSS3 Wiki的链接

Answer 2

您需要删除float: left，然后使用display: inline-block代替#nav li。您可以将以下CSS添加到样式表中：

#nav {
     text-align: center;
}

#nav li {
     display: inline-block;
}

<强> DEMO

Answer 3

你可以这样做

＆＃13;

    h1{
      text-align: center;
    }
    #nav ul {
      padding: 0px;
      text-align: center;
      list-style: none;
    }
    #nav li {
      display: inline-block;
    }
    #nav a:link,
    a:visited {
      margin-left: auto;
      margin-right: auto;
      display: block;
      width: 120px;
      font-weight: bold;
      color: #FFFFFF;
      background-color: #21AEB8;
      text-align: center;
      padding: 4px;
      text-decoration: none;
      text-transform: uppercase;
    }
    #nav a:hover,
    a:active {
      background-color: #2BC1CC;
    }

＆＃13;

<link rel="stylesheet" href="style.css">

<head>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <title>Stats Apps</title>
</head>

<body>
  <img src="logo.png" />
  
    <h1> Biostatistics </h1> 
  
  <div id="nav">
    <ul>

      <li><a href="#home">Home</a>
      </li>
      <li><a href="#news">News</a>
      </li>
      <li><a href="#contact">Contact</a>
      </li>
      <li><a href="#about">About</a>
      </li>
    </ul>
  </div>

＆＃13;

Answer 4

您可以使用以h1为中心的方法：

只需将文字居中使用text-align:center;

首先将整个标签居中放置。

margin:auto;
width:200px;

选中此示例：http://jsfiddle.net/bj1rta3w/

Answer 5

你需要更换＆＃34; display：block＆＃34; to＆＃34; inline-block＆＃34;在：

#nav a:link, a:visited {
  display: block;
  /* other rules... */
}

删除＆＃34; float：left＆＃34;并添加＆＃34;显示：内联＆＃34;到：

#nav li {
  float: left;
  /* other rules... */
}

这是有效的： http://codepen.io/anon/pen/aEong

Answer 6

试试这个

#nav {
    width:100%;
    text-align:center;
}

或者这个

#nav {
    margin:0 auto;
}

根据您的页面布局，其中一个或两个都可以使用

Answer 7

在#nav ul添加width: 530px;和margin: 0 auto;，然后它将居中。

为什么我的导航栏中心？

7 个答案:

更多信息......