0

在我的屏幕调整为更小的尺寸后，我试图将我的导航栏居中。我已确保我的课程包含我的导航：.menu具有以下内容

display: 
inline-block; 
margin: 0px auto;

它仍然没有中心...

但是，我的徽标包含在上面的 div 中，具有相同的属性，并且能够在屏幕调整大小时居中。

我的菜单 HTML

<nav class="navbar">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
        <span class="fa fa-bars"> </span>
    </button>
    <a href="javascript:void(0)" class="navbar-brand logo-top"> </a>
</div>
<div class="sidebar-offcanvas sidebar-nav" role="navigation">
    <ul class="menu">
        <li class="active"><a href=“#A" data-section=“A”&gt;A</a></li>
        <li><a href=“#B" data-section=“B”&gt;B</a></li>
        <li><a href=“#C" data-section=“C”&gt;C</a></li>
        <li><a href=“#D" data-section=“D”&gt;D</a></li>
        <li><a href=“#E" data-section=“E”&gt;E</a></li>
    </ul>
</div>
</nav>

有人可以给我一些见解吗？

4

1 回答 1

1

display: inline-block;需要text-align: center;在父元素上让它像你想的那样居中，因为它是一个内联元素。

相反，使用display: block; margin: 0px auto;. 如果不是一直穿过，您还需要设置宽度。

例子

于 2015-07-31T19:45:43.427 回答