导航垂直居中

Question

你能看看吗？ http://jsfiddle.net/c0w27sbe/我试图将左侧导航垂直居中，因为此时位于容器顶部。

HTML：

<nav id="topNavigation" class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Responsive navigation -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

            </button>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse-1">      
            <!-- top navigation-->
            <ul class="nav navbar-nav navbar-left col-md-16 col-sm-16 col-xs-16">
              <li>
                <a href="">Manufracturer<br>Approved</a>
              </li>
                <li>    
                  <a href="">Customer 1st<br>We'll visit you</a>
                </li>
                <li>    
                  <a href="">Excess<br>SAFE</a>
                </li>
                  <li>
                    <a href="">Friendly Form-<br>Free Help</a>
                </li>
                <li>    
                  <a href="">FREE-<br>Accident Management</a>
                </li>
            </ul>
            <!-- Social media icons -->
            <ul class="nav navbar-nav navbar-right col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-4 col-xs-offset-4">          
                <li>
                  <a href="#facebook"><i class="icon icon-facebook"></i></a>
                </li>
                <li>    
                  <a href="#googleplus"><i class="icon icon-twitter"></i></a>
                </li>
                <li>
                  <a href="#twitter"><i class="icon icon-youtube"></i></a>
                </li>
            </ul>
            <!-- End navbar-right -->
            <div class="clearfix"></div>
        </div>
        <!-- End navbar-collapse-1 -->
    </div>
    <!-- End container-fluid -->
</nav>

CSS

#topNavigation.navbar-default {
    background:black; 
    text-align: center;
    font-family:'Droid Sans', sans-serif;
    font-weight:700;
    font-size:1.2em;
}


#topNavigation.navbar-default .navbar-nav { 
border: 1px solid yellow;
}

#topNavigation ul.nav:nth-child(2) > li > a {
   border-right:none; 
   box-shadow:none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   padding:0;
}     

#topNavigation ul.nav:nth-child(2) > li {
    float:none;
    display:inline-block;
}

#topNavigation ul.nav:nth-child(2) > li > a > i {
    font-size:3em;
    line-height: 1.2;
    color: #808080;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 1px 0px 0px 1px #808080 inset;
}

#topNavigation ul.nav:nth-child(2) {
    height: 100%;
    vertical-align: middle;
    display: inline-block; }

#topNavigation ul.nav:first-child {
    margin: 0;        
    vertical-align: middle;
    display: inline-block;
 }

#topNavigation ul.nav:first-child li a {
    padding:0;
}
.navbar-nav > li {
    float: left;
}

这是bootstrap.css上的一些样式，但我找不到它是什么，所以我可以抵消它：S

你会看到，如果从外部资源中删除bootstrap.css，它可以按我的意愿工作！

谢谢

Answer 1

好吧，它的CSS属性（在booststrap.min.css中定义）会导致你出现问题：

.navbar-toggle {
    float: right;
}

您有两种可能的解决方案：

选项1 ：修改HTML代码

如果您可以控制html：

，则可以执行以下操作

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1" style="float: none;" />

选项2 ：进行CSS更改

如果您无法控制CSS，则可以在自定义html中添加以下类：

button[data-target="#navbar-collapse-1"] {
    float: none;
}

选项1小提琴：观察下面的HTML更改（选项1）：

body {

}
/*top navigation*/
#topNavigation.navbar-default {
  /*background: #f9540a;*/
    background:black;
  
    text-align: center;
    font-family:'Droid Sans', sans-serif;
    font-weight:700;
    font-size:1.2em;
}
/*
#mainNavigation .navbar-header {
    float: left;
    text-align: center;
    height:auto;
}
#mainNavigation .navbar-brand {
    height: auto; 
    padding:0;
}*/
/*
#mainNavigation .container-fluid{
height:auto;
overflow:auto;
}*/
/*
.navbar-brand img{
float:left;
}​
*/
/*
#topNavigation.navbar-default .navbar-nav > li {
    padding: 20px 10px;
}*/
#topNavigation.navbar-default .navbar-nav { border: 1px solid yellow;}
/*#topNavigation.navbar-default .navbar-nav > li > a {
    color: #fff;
    border-right:2px solid #d93700;
    box-shadow: 1px -0.5px 0.5px -0.5px rgba(255, 255, 250, 0.5);
    -webkit-box-shadow: 1px -0.5px 0.5px -0.5px rgba(255, 255, 250, 0.5);
   -moz-box-shadow: 1px -0.5px 0.5px -0.5px rgba(255, 255, 250, 0.5);
   padding: 0 20%;
}*/
#topNavigation.navbar-default .navbar-nav > li > a:hover {
    color: #808080;
}
#topNavigation ul.navbar-nav{

}
#topNavigation ul.nav:nth-child(2) > li > a {
   border-right:none; 
   box-shadow:none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   padding:0;
}     

#topNavigation ul.nav:nth-child(2) > li {
    float:none;
    display:inline-block;
}

#topNavigation ul.nav:nth-child(2) > li > a > i {
    font-size:3em;
    line-height: 1.2;
    color: #808080;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 1px 0px 0px 1px #808080 inset;

}


#topNavigation ul.nav:nth-child(2) {
    height: 100%;
    vertical-align: middle;
    display: inline-block; }

#topNavigation ul.nav:first-child {
    margin: 0;        
    vertical-align: middle;
    display: inline-block; }

#topNavigation ul.nav:first-child li a {
    padding:0;
}
.navbar-nav > li {
    float: left;
}



@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?rdonbp');
	src:url('../fonts/icomoon.eot?rdonbp#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.ttf?rdonbp') format('truetype'),
		url('../fonts/icomoon.woff?rdonbp') format('woff'),
		url('../fonts/icomoon.svg?rdonbp#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-approved:before {
	content: "\e800";
}
.icon-facebook:before {
	content: "\e801";
}
.icon-phone:before {
	content: "\e802";
}
.icon-tick:before {
	content: "\e803";
}
.icon-twitter:before {
	content: "\e804";
}
.icon-youtube:before {
	content: "\e805";
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
  <body>
   <!-- Navigation bar -->
<nav id="topNavigation" class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Responsive navigation -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1" style="float: none;">	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>

            </button>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse-1">      
            <!-- top navigation-->
            <ul class="nav navbar-nav navbar-left col-md-16 col-sm-16 col-xs-16">
              <li>
                <a href="">Manufracturer<br>Approved</a>
              </li>
                <li>	
                  <a href="">Customer 1st<br>We'll visit you</a>
                </li>
                <li>	
                  <a href="">Excess<br>SAFE</a>
                </li>
                  <li>
                    <a href="">Friendly Form-<br>Free Help</a>
                </li>
                <li>	
                  <a href="">FREE-<br>Accident Management</a>
                </li>
            </ul>
            <!-- Social media icons -->
            <ul class="nav navbar-nav navbar-right col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-4 col-xs-offset-4">          
                <li>
                  <a href="#facebook"><i class="icon icon-facebook"></i></a>
                </li>
                <li>	
                  <a href="#googleplus"><i class="icon icon-twitter"></i></a>
                </li>
                <li>
                  <a href="#twitter"><i class="icon icon-youtube"></i></a>
                </li>
            </ul>
            <!-- End navbar-right -->
            <div class="clearfix"></div>
        </div>
        <!-- End navbar-collapse-1 -->
    </div>
    <!-- End container-fluid -->
</nav>
<!--
<nav id="mainNavigation" class="navbar navbar-default" role="navigation">
    <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2">	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>

            </button>
          <div class="navbar-brand">
            <img src="images/advance_logo.png" alt=""/>
          </div>  
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse-2">      
          
            <ul class="nav navbar-nav navbar-left">
              <li>
                <a href="">Home</a>
              </li>
                <li>	
                  <a href="">Accident<br>Management</a>
                </li>
                <li>	
                  <a href="">Approved<br>Manufacturers</a>
                </li>
                  <li>
                    <a href="">Our<br>Services</a>
                </li>
                <li>	
                  <a href="">About<br>Advance</a>
                </li>
                 <li>	
                  <a href="">Contact<br>Us</a>
                </li>
            </ul>
          
            <ul class="nav navbar-nav navbar-right">          
                
            </ul>
     
        </div>
         <div class="clearfix"></div>
    
    </div>
   
</nav>
-->
  </body>

选项2小提琴：观察下面的CSS更改（选项2）：

body {
}
/*top navigation*/
 #topNavigation.navbar-default {
    /*background: #f9540a;*/
    background:black;
    text-align: center;
    font-family:'Droid Sans', sans-serif;
    font-weight:700;
    font-size:1.2em;
}
/*
#mainNavigation .navbar-header {
    float: left;
    text-align: center;
    height:auto;
}
#mainNavigation .navbar-brand {
    height: auto; 
    padding:0;
}*/

/*
#mainNavigation .container-fluid{
height:auto;
overflow:auto;
}*/

/*
.navbar-brand img{
float:left;
}​
*/

/*
#topNavigation.navbar-default .navbar-nav > li {
    padding: 20px 10px;
}*/
 #topNavigation.navbar-default .navbar-nav {
    border: 1px solid yellow;
}
/*#topNavigation.navbar-default .navbar-nav > li > a {
    color: #fff;
    border-right:2px solid #d93700;
    box-shadow: 1px -0.5px 0.5px -0.5px rgba(255, 255, 250, 0.5);
    -webkit-box-shadow: 1px -0.5px 0.5px -0.5px rgba(255, 255, 250, 0.5);
   -moz-box-shadow: 1px -0.5px 0.5px -0.5px rgba(255, 255, 250, 0.5);
   padding: 0 20%;
}*/
 #topNavigation.navbar-default .navbar-nav > li > a:hover {
    color: #808080;
}
#topNavigation ul.navbar-nav {
}
#topNavigation ul.nav:nth-child(2) > li > a {
    border-right:none;
    box-shadow:none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    padding:0;
}
#topNavigation ul.nav:nth-child(2) > li {
    float:none;
    display:inline-block;
}
#topNavigation ul.nav:nth-child(2) > li > a > i {
    font-size:3em;
    line-height: 1.2;
    color: #808080;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 1px 0px 0px 1px #808080 inset;
}
#topNavigation ul.nav:nth-child(2) {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}
#topNavigation ul.nav:first-child {
    margin: 0;
    vertical-align: middle;
    display: inline-block;
}
#topNavigation ul.nav:first-child li a {
    padding:0;
}
.navbar-nav > li {
    float: left;
}
@font-face {
    font-family:'icomoon';
    src:url('../fonts/icomoon.eot?rdonbp');
    src:url('../fonts/icomoon.eot?rdonbp#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?rdonbp') format('truetype'), url('../fonts/icomoon.woff?rdonbp') format('woff'), url('../fonts/icomoon.svg?rdonbp#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
    font-family:'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-approved:before {
    content:"\e800";
}
.icon-facebook:before {
    content:"\e801";
}
.icon-phone:before {
    content:"\e802";
}
.icon-tick:before {
    content:"\e803";
}
.icon-twitter:before {
    content:"\e804";
}
.icon-youtube:before {
    content:"\e805";
}

button[data-target="#navbar-collapse-1"] {
    float: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <!-- Navigation bar -->
    <nav id="topNavigation" class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- Responsive navigation -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1" />	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>

                </button>
            </div>
            <div class="collapse navbar-collapse" id="navbar-collapse-1">
                <!-- top navigation-->
                <ul class="nav navbar-nav navbar-left col-md-16 col-sm-16 col-xs-16">
                    <li> <a href="">Manufracturer<br>Approved</a>

                    </li>
                    <li> <a href="">Customer 1st<br>We'll visit you</a>

                    </li>
                    <li> <a href="">Excess<br>SAFE</a>

                    </li>
                    <li> <a href="">Friendly Form-<br>Free Help</a>

                    </li>
                    <li> <a href="">FREE-<br>Accident Management</a>

                    </li>
                </ul>
                <!-- Social media icons -->
                <ul class="nav navbar-nav navbar-right col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-4 col-xs-offset-4">
                    <li> <a href="#facebook"><i class="icon icon-facebook"></i></a>

                    </li>
                    <li> <a href="#googleplus"><i class="icon icon-twitter"></i></a>

                    </li>
                    <li> <a href="#twitter"><i class="icon icon-youtube"></i></a>

                    </li>
                </ul>
                <!-- End navbar-right -->
                <div class="clearfix"></div>
            </div>
            <!-- End navbar-collapse-1 -->
        </div>
        <!-- End container-fluid -->
    </nav>
    <!-- <nav id="mainNavigation" class="navbar navbar-default" role="navigation">
    <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2">	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>

            </button>
          <div class="navbar-brand">
            <img src="images/advance_logo.png" alt=""/>
          </div>  
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse-2">      
          
            <ul class="nav navbar-nav navbar-left">
              <li>
                <a href="">Home</a>
              </li>
                <li>	
                  <a href="">Accident<br>Management</a>
                </li>
                <li>	
                  <a href="">Approved<br>Manufacturers</a>
                </li>
                  <li>
                    <a href="">Our<br>Services</a>
                </li>
                <li>	
                  <a href="">About<br>Advance</a>
                </li>
                 <li>	
                  <a href="">Contact<br>Us</a>
                </li>
            </ul>
          
            <ul class="nav navbar-nav navbar-right">          
                
            </ul>
     
        </div>
         <div class="clearfix"></div>
    
    </div>
   
</nav>
-->
</body>

希望这有帮助!!!