Question

我的网站上有一个纯css导航栏，里面有这段代码......

.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #3399ff;
    text-align: center;
}
.item {
    float: left;
    display: inline;
}
.item a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
}
.item a:hover {
    background-color: #a300cc;
    color: white;
}

HTML ...

<ul class="nav" style="text-align:center">
    <li class="item"><u><a href="http://www.coding-kids.net/"><i class="fa fa-home"></i> Home</a></u></li>
    <li class="item"><u><a href="http://ask.coding-kids.net/"><i class="fa fa-question-circle"></i> Ask Codey</a></u></li>
    <li class="item"><u><a data-toggle="modal" data-target="#comingSoon"><i class="fa fa-puzzle-piece"></i> Extras</a></u></li>
</ul>

我正试着让它集中在页面中间。我尝试将其包装在div中并使用text-align:center;设置样式，但导航栏不会移动，只会移动其中的文本。如何让它在页面中间？

Answer 1

只需使用flex

即可

这是代码：

<ul class="nav" style="display:flex; justify-content:center">
    <li class="item"><u><a href="http://www.coding-kids.net/"><i class="fa fa-home"></i> Home</a></u></li>
    <li class="item"><u><a href="http://ask.coding-kids.net/"><i class="fa fa-question-circle"></i> Ask Codey</a></u></li>
    <li class="item"><u><a data-toggle="modal" data-target="#comingSoon"><i class="fa fa-puzzle-piece"></i> Extras</a></u></li>
</ul>

Answer 2

请试试这个：对于nav类使用一些固定的并应用margin：0 auto，它将使它成为页面的中心。

.nav {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #3399ff;
    width:500px;
    margin:0 auto;
    }

Answer 3

这对我有用：

CSS

.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3399ff;
  text-align: center;
}
.item {
  display: inline;
}
.item a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
}
.item a:hover {
  background-color: #a300cc;
  color: white;
}

HTML

<ul class="nav" style="text-align:center">
    <li class="item"><u><a href="http://www.coding-kids.net/"><i class="fa fa-home"></i> Home</a></u></li>
    <li class="item"><u><a href="http://ask.coding-kids.net/"><i class="fa fa-question-circle"></i> Ask Codey</a></u></li>
    <li class="item"><u><a data-toggle="modal" data-target="#comingSoon"><i class="fa fa-puzzle-piece"></i> Extras</a></u></li>
</ul>

小提琴： https://jsfiddle.net/330LxuL3/

通过在CSS中删除float .item来解决此问题

Answer 4

删除float: left; css中的.item。新的Css是

.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3399ff;
  text-align: center;
}
.item {
  display: inline;
}
.item a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
}
.item a:hover {
  background-color: #a300cc;
  color: white;
}

CSS导航栏位于页面中间

4 个答案: