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

你的导航容器应该具有以下属性以使其成为中心：我还没有测试过。如果你想要精确的解决方案，也可以创建fiddler或共享HTML代码。

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

如何将此主导航居中

1 个答案: