html - 带有搜索栏的中心 Logo 向右 Bootstrap

Question

所以首先这就是我要实现的目标

我想保持 Logo 在网页中间居中，搜索栏向右拉(下面有文字)这是我目前拥有的代码: 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;
}

问题是 Logo 没有完全居中，并且稍微向左拉。

Answer 1

演示 https://jsbin.com/iJaJAzIM

1. Logo 需要绝对位置并且图像大小很重要。如果它是 300px，那么它的左边是 50%，顶部是 50%，但是顶部和左边距是负的宽度和高度的一半。

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

3. 折叠方式需要您在媒体查询之前在 CSS 中进行调整。此处所做的事情会影响所有视口(viewport)大小，因此您可能必须以最小宽度反转它。

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 -->