Html 如何使导航栏元素居中？_Html_Css_Twitter Bootstrap

Html 如何使导航栏元素居中？

html css twitter-bootstrap

Html 如何使导航栏元素居中？,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,如何使用引导将导航栏元素带到中心 HTML <body> <nav class="navbar navbar-inverse navbar-fixed-top " role="navigation"> <div> <ul class="nav navbar-nav"> <li><a href="#">Home</a><

如何使用引导将导航栏元素带到中心

HTML

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top " role="navigation">
          <div>
              <ul class="nav navbar-nav">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About</a></li>
                  <li><a href="#">Portfolio</a></li>
                  <li><a href="#">Contact</a></li>
               </ul>
           </div>
    </nav> 
</body>

这是我正在处理的全部代码。

将align属性添加到“nav”标记中，并将其值设置为“center”。

这是navbar元素的标记和css

HTML:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
       <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse">
                 <ul class="nav">
                   <li><a href="#">Home</a></li>
                   <li><a href="#">About</a></li>
                   <li><a href="#">Portfolio</a></li>
                   <li><a href="#">Contact</a></li>
                 </ul>
            </div><!--/.nav-collapse -->
       </div><!-- container -->
  </div><!-- navbar-inner -->
</div><!--  navbar navbar-fixed-top -->

 .navbar .nav, .navbar .nav > li {
  float:none;
  display:inline-block;
  *display:inline; /* ie7 fix */
  *zoom:1; /* hasLayout ie7 trigger */
  vertical-align: top;
 }

 .navbar-inner {
 text-align:center;
}

正文{
位置：相对位置；
高度：100vh；
宽度：100vw；
}
navbar先生{
背景色：#000000；
位置：绝对位置；
顶部：钙（50%-3em）；
边框：3倍脊红；
边界半径：12px；
身高：6em；
保证金：0自动；
宽度：100%；
}
林克斯先生{
显示：表格；
颜色：#808080；
列表样式类型：无；
文本对齐：居中；
宽度：100%；
溢出：隐藏；
填充物：1.5em.25em；
}
.linx>li{
显示：表格单元格；
颜色：#808080！重要；
垂直对齐：中间对齐；
字号：1.5em；
线高：2；
文本对齐：居中；
}
a{
颜色：#FFF！重要；
}
a:悬停{
颜色：红色！重要；
文字装饰：无！重要；
外形：3倍纯红；
}
.全部{
不透明度：0.5；
背景色：#ccc；
位置：固定；
宽度：100%；
身高：100%；
顶部：0px；
左：0px；
z指数：-1；
}

可以使用

显示：内联

然后只需将

填充设置为正确的。
以下是两个可能对您有所帮助的示例。一个将链接均匀地分布在容器上
，另一个将ul
置于中心
例1

.navbar.navbar-inverse.navbar-nav>li>a:悬停{
颜色：红色；
}
@介质（最小宽度：768px）{
.navbar.navbar-inverse.navbar导航{
显示：表格；
宽度：100%；
}
.navbar.navbar-inverse.navbar导航>li{
显示：表格单元格；
浮动：无；
}
.navbar.navbar-reverse.navbar导航>li>a{
文本对齐：居中；
}
}

切换导航










不确定该问题，但是否希望导航栏列表项集中在一行中，如下图所示

为此，请使ul li列表的规则更加具体，并将显示更改为内联块，如下所示：
.navbar-fixed-top ul li{
display:inline-block;
color:#808080 !important;
}

它所做的是覆盖核心引导中的默认.navbar和.navbar固定顶ui li属性。如果不添加.navbar固定顶部
，默认的核心引导CSS会更具体，因此优先级更高
有人已经编辑过了！！此人在css样式表中的ul元素中添加了“text align=center”，这是解决您问题的另一个方法。
.navbar-fixed-top ul li{
display:inline-block;
color:#808080 !important;
}