jquery - 如何将 slicknav 的菜单按钮居中？

Question

我想在slicknav中居中菜单菜单按钮。我试过但没有任何效果。我可以将其对齐到左侧，但不能居中。

样品标记在这里

<ul id="menu">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
</ul>

和js

$(function() {
  $('#menu').slicknav();
});

这是codepen链接http://codepen.io/anon/pen/oLWpao

Answer 1

我找到了我的问题的解决方案。

刚刚添加了一些CSS

.slicknav_menu {
  display: block;
  text-align: center;
  width: 100%;
}
.slicknav_btn {
  display: inline-block;
  float: none;
  text-align: center;
}

这解决了我的问题。

这是codepen链接：http ://codepen.io/anon/pen/OXmQLG

Answer 2

检查您的浏览器检查。所有元素都有一个 display: 块，它给它一个完整的宽度。如果你设置 '.slicknav_nav a' on display: inline-block 和 li parent a text-center，一切都应该是你想要的。

.slicknav_nav a {
  display: inline-block; // instead of block;
}

.slicknav_nav li {
  text-align: center;
}

这可能是一些有用的信息：display: inline 和 display: inline-block 之间有什么区别？

Answer 3

.slicknav_menu {
    text-align: center;
}

.slicknav_btn { 
    display: inline-block; 
    float: none;
}