中心引导li元素响应页面中心

我想让导航栏中的所有元素总是显示在导航栏的中心，因此页面的中心，但仍然是向左拉。当我删除引导库时，它们是居中的，所以在某处存在冲突，但我不确定我想要使用引导程序。中心引导li元素响应页面中心

我的自定义CSS也在引导之后被链接。

非常感谢。

HTML：

<div class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="container"> 
      <ul class="nav navbar-nav"> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="index.html">About</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

CSS：

.navbar { 
    margin-bottom: 0px; 
    border-radius: 0px; 
} 

.nav { 
    list-style:none; 
    margin:0; 
    padding:0; 
    text-align:center; 
} 

.nav li { 
    display:inline; 
} 

.nav a { 
    display:inline-block; 
    padding:10px; 
} 

.navbar-default { 
    background: #900000; 
    border: none; 
}

来源

2016-02-15 James

内容有任何特定用途使用嵌套.container-fluid和.container类？ – markoffden

可能不是，除了它允许它与jumbotron相对的页面边缘对齐的事实。我拿起了一个旧项目，这就是他们为什么会在那里。只要元素在页面中居中，它们就可以被删除。 – James

@markoffden：通过自动边距居中仅适用于块元素。如果你想中心一个'inline-block'元素，可以通过父元素上的'text-align'完成。 – CBroe

默认情况下，引导的CSS浮动.navbar-nav左侧。因此：

@media (min-width: 768px) 
.navbar-nav { 
    float: left; 
    margin: 0; 
}

您需要覆盖此属性。我建议给一个独特的类，比如.myNav，并重置这个浮点数。还加入了display:inline-block

<div class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="container"> 
      <ul class="nav navbar-nav myNav"> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="index.html">About</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

CSS：

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

最后，添加一个文本对齐：中心到包装导航栏元素中心内部

.navbar { 
    margin-bottom: 0px; 
    border-radius: 0px; 
    text-align:center; 
}

来源

2016-02-15 14:27:40 IndieRok

正是我在找的东西，以为我是沿着正确的路线只是不知道哪里拉到左边正好发生。感谢您的详细解答。 – James

我的荣幸！建议的话，总是检查你的浏览器的开发工具来检查CSS。你会发现这真的很有帮助 – IndieRok

这里是一个可能的解决方案：

HTML：

<div class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="container"> 
      <ul class="nav navbar-nav navbar-center"> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="index.html">About</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

CSS：

.navbar { 
    margin-bottom: 0px; 
    border-radius: 0px; 
} 

.navbar-center { 
    width: 100%; 
    margin: 0 auto; 
    text-align: center; 
    text-align:center; 
} 

.nav li { 
    display:inline-block; 
    float: none; 
} 

.nav a { 
    padding:10px; 
} 

.navbar-default { 
    background: #900000; 
    border: none; 
}

小提琴：https://jsfiddle.net/j2ska9ym/

来源

2016-02-15 14:26:56 DebRaj

中心引导li元素响应页面中心

回答

相关问题