中心标识与搜索栏拉右引导

Question

首先，这是我想要实现的目标

我希望将徽标置于网页中间，搜索栏向右拉（其下方有文字） 这是我目前的代码： http://jsfiddle.net/62b4jf1n/

<div class="divide-nav navbar logo-nav navbar-static-top" role="navigation">

    <ul class="nav navbar-nav">
        <li>
            <div class="col-lg-5 col-xs-10 col-centered">
                <a href="/">
                    <img style="max-width:600px; margin-top: -7px;" src="http://i.imgur.com/FL53zwz.png">
                </a>
            </div>
        </li>
    </ul>
    <div class="col-sm-3 col-md-3 pull-right">
        <form class="navbar-form" role="search">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                <div class="input-group-btn">
                    <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>
                    </button>
                </div>
            </div>
            <br>
            <p class="white">
                PH: 09 444 4444
                <br> FAX: 09 444 4444
            </p>
        </form>
    </div>
</div>

然后是CSS

.divide-nav{
  height: 120px;
  background-color: #222222;
  border: 0 !important;
}
.logo-nav{
margin-bottom: 0px;
}
.white, .white a {
  color: #fff;
}
.col-centered{
    float: none;
    margin: 0 auto;
}

问题是徽标没有完全居中，并且略微向左拉。

Answer 1

DEMO https://jsbin.com/iJaJAzIM

1. 徽标需要绝对位置，图像尺寸很重要。如果它是300px那么它的左边是50％而顶部是50％但是顶部和左边距是负宽度和高度的一半。

2. 导航栏需要由您着色。查看未经提交的Bootstrap默认CSS以了解要定位的选择器，并在最小宽度媒体查询中执行这些更改。

3. 在媒体查询之前，您需要在CSS中调整此崩溃的方式。此处完成的Anthing会影响所有视口大小，因此您可能必须以最小宽度反转它。

<强> CSS

.navbar {
    margin: 0
}
.logobar img {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    display: block;
    padding: 2% 3%;
}
.logobar {
    color: #fff;
    background: #333;
    position: relative;
    margin-bottom: 20px;
    padding: 15px;
}
.logobar form {
    text-align: center;
    margin-top: 15px;
}
@media (min-width:500px) { 
    .logobar img {
        float: left;
        margin-top: 20px;
    }
    .logobar form {
        text-align: center;
        margin-top: 15px;
        float: right;
        width: 40%;
    }
}
@media (min-width:768px) { 
    .logobar {
        padding: 30px 0
    }
    .logobar img {
        position: absolute;
        height: auto;
        padding: 0;
        max-width: 300px;
        margin-top: -25px;
        top: 50%;
        left: 50%;
        margin-left: -150px;
        float: none;
    }
    .logobar form {
        margin-top: 25px;
        float: right;
        width: 200px;
        text-align: center;
        padding-right: 2%;
    }
    .navbar > .container {
        text-align: center
    }
    .navbar-header {
        float: none;
        display: inline-block;
    }
    .navbar .navbar-nav {
        float: none;
        display: inline-block;
        clear: none;
    }
    .navbar .navbar-nav > li {
        float: none;
        display: inline-block;
    }
    .navbar .navbar-nav > li li {
        text-align: left
    }
    .collapse.navbar-collapse#centerednav {
        float: none;
        display: inline-block!important;
        width: auto;
        clear: none;
    }
}

<强> HTML：

<div class="navbar navbar-inverse navbar-static-top" role="navigation">
   <div class="container">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
         <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="centerednav">
         <ul class="nav navbar-nav">
            <li class="active">
               <a href="#">
                  Home
               </a>
            </li>
            <li>
               <a href="#about">
                  About
               </a>
            </li>
            <li>
               <a href="#contact">
                  Contact
               </a>
            </li>
            <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Dropdown <b class="caret"></b>
               </a>
               <ul class="dropdown-menu">
                  <li>
                     <a href="#">
                        Action
                     </a>
                  </li>
                  <li>
                     <a href="#">
                        Another action
                     </a>
                  </li>
                  <li>
                     <a href="#">
                        Something else here
                     </a>
                  </li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li>
                     <a href="#">
                        Separated link
                     </a>
                  </li>
                  <li>
                     <a href="#">
                        One more separated link
                     </a>
                  </li>
               </ul>
            </li>
         </ul>
      </div>
      <!--/.nav-collapse -->

   </div>
   <!-- /.container -->

</div>
<!-- /.navbar -->

<div class="logobar clearfix">
   <img src="http://i.imgur.com/FL53zwz.png">
   <form role="search">
      <div class="input-group">
         <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
         <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>
            </button>
         </div>
      </div>
      <br>
      <p> PH: 09 444 4444 <br>
         FAX: 09 444 4444 </p>
   </form>
</div><!-- /.logobar -->