如何将 slicknav 的菜单按钮居中？答案

【问题标题】：How can I center menu button for slicknav?如何将 slicknav 的菜单按钮居中？
【发布时间】：2016-07-01 08:04:19
【问题描述】：

我想将菜单菜单按钮置于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

【问题讨论】：

你想要完整的菜单在中心？？
是的，我终于把它卖掉了，codepen.io/anon/pen/OXmQLG

标签： jquery html css responsive-design slicknav

【解决方案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

【讨论】：

【解决方案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;
}

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

【讨论】：

【解决方案3】：

.slicknav_menu {
    text-align: center;
}

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

【讨论】：