我怎样才能使这个主导航居中

Question

我在里面使用了text-align: center，但是.main-nav没有被影响。使此导航居中的最佳方式是什么？

 /***** Navigation *****/

    .main-nav { font-family: 'Lato', Helvetica, Arial, sans-serif; font-weight: 900; text-transform: uppercase; }
    .main-nav li { float: left;  position: relative; }
    .main-nav li a { display: block; color: #333131; font-size: 16px; font-size: 1rem; line-height: 1; letter-spacing: 2.7px; padding: 12px 0; margin-right: 30px; }
    .main-nav li a:hover { color: #000; }
    .main-nav ul li a, .main-nav ul .current-menu-item:hover > a { border-bottom: 2px solid #fff; }
    .main-nav ul .current-menu-item > a { border-bottom: 2px solid red; color: #000; }
    .main-nav ul ul li a, .main-nav ul ul .current-menu-item:hover > a, .main-nav ul ul .current-menu-item > a { border: none; }
    .main-nav ul li:hover > ul { display: block; background: #fff; z-index: 9999; }
    .main-nav ul ul { display: none; position: absolute; left: -20px; }
    .main-nav ul ul li { padding: 0 20px; width: 13rem; background: #f6f6f6; }
    .main-nav ul ul ul { left: 100%; top: 0; }

Answer 1

您的导航容器应具有以下属性以使其居中：我尚未测试。如果您想要确切的解决方案，请创建提琴手或共享 HTML 代码。

.navContainer{
 width:100px;  <!-- This value can be any -->
 margin: 10px auto;  <!-- first value of margin can be any -->
}