代码之家 › 专栏 › 技术社区 › Md. Monirul Alom

如何将滑翔导航的菜单按钮居中?

slicknav responsive-design css html jquery

0

Md. Monirul Alom · 技术社区 · 10 年前

我想将菜单按钮居中 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();
});

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

3 回复 | 直到 10 年前

1

Md. Monirul Alom 10 年前

我找到了问题的答案。

刚刚添加了一些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

0

Community Mohan Dere 9 年前

检查浏览器检查。所有元素都有一个display:block,它提供了一个全宽。如果您设置了'。splichnava'显示:内联块和li父级文本中心,一切都应该是您想要的。

.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

0

Timothy Justin T. 10 年前

.slicknav_menu {
    text-align: center;
}

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