我将如何对移动页面导航栏进行排序？

Question

所以我有一个移动网站，其中导航栏是有序的，悬停在背景颜色上与设计不成比例，单击时看起来很糟糕，我想将其居中而不必弄乱代码。

这是现在的样子：

我尝试修改代码并去掉 float: left 到 None 然后导航似乎打乱了。

这里是移动 CSS 代码：

       .mainBanner nav{
position: absolute;
/*text-align: center;*/
   top: 15%;
   left: 15%;
font-size: 1.190em;
font-weight: bold;
height: 40px;
line-height: 30px;
margin: 0 auto 30px 50px; 
font-family: 'lato-Reg', sans-serif;

    }

    .mainBanner nav ul {
   list-style: none; 
   margin: 0 auto;
     }

    .mainBanner nav ul li {
float: left; 
display: inline; 
    }
  .mainBanner nav a:link, .mainBanner nav a:visited {
color: #ecf0f1; /* Color of the font in the nav*/ 
display: inline-block;
height: 30px;
padding: 5px 30px;
text-decoration: none;
     }
  .mainBanner nav a:hover, .mainBanner nav a:active,
  .mainBanner nav .active a:link, .mainBanner nav .active a:visited {
background: #16a085;
color: #fff;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
text-shadow: none !important;
    }

Answer 1

用这个更新你的代码让我们看看

//comment this line
.mainBanner nav ul li {
    /*float: left; */
    display: inline; 
}

//uncomment this line
.mainBanner nav{
   text-align: center;
}

Fiddle