Html 中心标志，搜索栏向右拉引导_Html_Css_Twitter Bootstrap

Html 中心标志，搜索栏向右拉引导

html css twitter-bootstrap

Html 中心标志，搜索栏向右拉引导,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,所以首先，这就是我想要实现的我想把标识放在网页中间，搜索框向右拉（文本在它下面）。这是我目前拥有的代码：问题是徽标没有完全居中，并且稍微向左拉。DEMO 徽标需要一个绝对位置，图像大小很重要。如果它是300px，那么它的左侧是50%，顶部是50%，但是顶部和左侧的边距是宽度和高度的一半导航栏需要由您着色。查看未统一的引导默认CSS，了解目标选择器，并在最小宽度媒体查询中进行这些更改在媒体查询之前，您需要在CSS中调整这种折叠方式。此处所做的调整会影响所有视口大小，因此您可能必

所以首先，这就是我想要实现的

<>我想把标识放在网页中间，搜索框向右拉（文本在它下面）。这是我目前拥有的代码：

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

DEMO

徽标需要一个绝对位置，图像大小很重要。如果它是300px，那么它的左侧是50%，顶部是50%，但是顶部和左侧的边距是宽度和高度的一半

导航栏需要由您着色。查看未统一的引导默认CSS，了解目标选择器，并在最小宽度媒体查询中进行这些更改

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

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


切换导航
















导航标题









PH:09444444

传真：09444444