我怎样才能使 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();
});

这里是codepenlinkhttp://codepen.io/anon/pen/oLWpao

Answer 1

检查您的浏览器。所有的元素都被赋予了一个 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;
}

这可能是一些有用的信息：What is the difference between display: inline and display: inline-block?

Answer 2

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

刚刚添加了一些 css

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

这解决了我的问题。

这里是 codepen link: http://codepen.io/anon/pen/OXmQLG

Answer 3

.slicknav_menu {
    text-align: center;
}

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

我怎样才能使 slicknav 的菜单按钮居中？

How can I center menu button for slicknav?

html

css

jquery

responsive-design

slicknav