为什么我的导航栏无法居中？答案

【问题标题】：Why I cannot center my nav bar?为什么我的导航栏无法居中？
【发布时间】：2017-02-24 02:45:18
【问题描述】：

h1{
       text-align:center;
       font-family: 'Nosifer', cursive;
       font-size:35px;

    }



    nav { 
        border-top: 5px solid black;
        padding:5px 5px;
                text-align:center;


         }

    nav a:link,a:visited { 
        border-radius: 0 0 15px 15px; 
        padding:0px 15px;
    }


    nav a {

        float: left;
        font-weight: bold;
        color: #000;
        margin: 0 5px; 
        background-color: #131313; 
        font-family: 'Nosifer', cursive;
        text-decoration: none;
        font-size: 20px;
        color:red;

        }

    nav a:hover {

        background-color: #D10000; 
        color: black;
        padding-top: 12px;
        padding-bottom: 10px;


        }


        .active{


            background-color: #D10000; 
            color: black;
            padding-top: 12px;
            padding-bottom: 10px;  


        }

        body{
            background-color: #ffe6e6;
        }


  <nav>
     <a href="#" class="active">HOME</a>
     <a href="#">COMPUTER PARTS</a>
     <a href="#">BUILD A COMPUTER</a>
     <a href="#">MEDIA</a>
     <a href="#">GO TO MAIN</a>
  </nav>

谁能帮帮我。我尝试使用 align="center", text-align:center; 我尝试了很多其他的东西，但由于某种原因，它没有将我的导航栏放在我的网页中心。此外，当我尝试在导航栏底部显示图像并将其居中时，它不会居中。

【问题讨论】：

你要居中的元素是什么？

标签： html css

【解决方案1】：

没有看到您的标记，很难说。但可能是因为nav a 上的float: left。从nav a 中删除它，然后添加display: inline-block;。

【讨论】：

@MiguelWightman 太棒了，不客气。如果它有帮助，请务必支持答案，如果您认为它解决了您的问题，请接受它（答案的复选标记），以便其他人知道它已解决
@MiguelWightman 不确定您是否注意到但人们仍在回答您的问题，因为您尚未接受答案。如果已解决，请务必接受答案，以免人们认为它是开放的，并继续为您提供解决方案。

【解决方案2】：

你甚至没有定位任何东西......

使用属性top: value、left: value、right: value 和bottom: value 定位导航栏。您可以将这些属性与transform: translate(X, Y) 结合使用。

如果确实有文本，

text-align 只会在元素内对齐 text。如果没有任何文本，它不会做任何事情。

【讨论】：

【解决方案3】：

您需要从 'nav a' 选择器中删除 'float: left' 并按照以下方式重写代码：

nav a {
    display: inline-block;
    font-weight: bold;
    color: #000;
    margin: 0 5px; 
    background-color: #131313; 
    font-family: 'Nosifer', cursive;
    text-decoration: none;
    font-size: 20px;
    color:red;

}

【讨论】：