Question

我有一个如下所示的导航栏。如何将元素Help Video居中。

＆＃13;

  .header_title{
      font-size: 20px;
      color: white;
  }

  .center {
      text-align:center;
  }
  
  .center {
      float:none;
      display:inline-block;
      *display:inline; /* ie7 fix */
      *zoom:1; /* hasLayout ie7 trigger */
      vertical-align: top;
    }

＆＃13;

<div class="navbar navbar-default navbar-fixed-top navbar_form" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
        </button>
        <a class="navbar-brand" href="/"><font class="header_title" >Some text</font></a>
      </div>
    
     
      <!-- Fixed navbar I want to center this.--> 
        <div class="navbar-collapse collapse center">
          <a class="navbar-brand" href="#"><font class="header_title" >HELP VIDEO</font></a>  
        </div>
    </div><!--/.nav-collapse -->

＆＃13;

但它并没有成为中心。我在哪里做错了？

Answer 1

从样式表中删除以下样式。

.center {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}

Answer 2

只需从display: block !important;中删除.navbar-collapse.collapse {

年，然后将text-align:center;发送给.navbar {。

它将以帮助视频部分为中心。

您可以查看更新后的代码Here.

Answer 3

运行代码段，您可以看到HELP VIDEO元素与中心对齐。

＆＃13;

.header_title{
  font-size: 20px;
  color: black;
}
.center {
    text-align:center;
}
/*
Remove these styles

.center {
    float:none;
    display:inline-block;
    *display:inline; 
    *zoom:1; 
    vertical-align: top;
} 
*/

＆＃13;

<div class="navbar navbar-default navbar-fixed-top navbar_form" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
    </button>
    <a class="navbar-brand" href="/"><font class="header_title" >Some text</font></a>
  </div>


  <!-- Fixed navbar I want to center this.--> 
    <div class="navbar-collapse collapse center">
      <a class="navbar-brand" href="#"><font class="header_title" >HELP VIDEO</font></a>  
    </div>
</div><!--/.nav-collapse -->

＆＃13;

获取导航栏的元素到中心

3 个答案: