html - CSS 导航栏在页面中间居中

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>